Link

Introduction

The Link component provides a robust solution for creating accessible links that seamlessly handle both internal navigation and external destinations. It automatically detects external links and applies appropriate attributes for security and accessibility, while offering optional button styling for enhanced visual impact.

Automatic external link detection

The Link component automatically detects external URLs (starting with http, https, or //) and applies proper security attributes (target="_blank", rel="noopener noreferrer") along with accessibility features.

When to use

Use the Link component when you need to:

• Navigate between pages in your application
• Link to external websites or resources
• Create button-styled links for call-to-action elements
• Ensure consistent link accessibility across your site
• Automatically handle external link security and accessibility
• Add animated interactions to link buttons
• Maintain proper focus management and keyboard navigation

Quick example

Internal linkExternal link Opens in a new tab Button link

Get Started

Learn More

Download

Try hovering over the “Get Started” button to see the animation effect!

Button Types and Variants

All button types from the Button component are available here. Here’s a few examples of the available button types, variants, and sizes:

Button Types (Filled)

DefaultPrimarySecondaryInfoSuccessWarningErrorGhost

Button Types (Outlined)

DefaultPrimarySecondaryInfoSuccessWarningErrorGhost

Button Sizes

SmallMedium (Default)Large

Animations

Available animations are the same as the Button component animations.

Boop

Nudge

Usage

Learn how to implement the Link component in your project, from basic navigation to advanced button-styled links.

Basic links

---
import { Link } from 'accessible-astro-components'
---

<!-- Internal link -->
<Link href="/about">About Us</Link>

<!-- External link (automatically detected) -->
<Link href="https://astro.build">Visit Astro</Link>

<!-- Explicitly mark as external -->
<Link href="https://example.com" isExternal>External Site</Link>

Button-styled links

<Link href="/contact" isButton>Contact Us</Link>
<Link href="/signup" isButton type="primary">Sign Up</Link>
<Link href="/docs" isButton variant="outlined">Documentation</Link>

Different button types and sizes

<Link href="#" isButton type="info" size="sm">Small Info</Link>
<Link href="#" isButton type="success" size="md">Medium Success</Link>
<Link href="#" isButton type="warning" size="lg">Large Warning</Link>
<Link href="#" isButton type="error">Error Button</Link>

Button vs link semantics

When using isButton={true}, the component still renders as an anchor element (<a>) but styled as a button. This preserves proper link semantics while providing button-like appearance for navigation actions.

With icons and animations

---
import { Link } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
---

<Link
  href="/dashboard"
  isButton
  type="primary"
  animateOnHover
  animationType="boop"
>
  <Icon name="ion:home" />
  Dashboard
</Link>

<Link
  href="/settings"
  isButton
  animateOnHover
  animationType="rotate"
  animationIntensity={8}
>
  <Icon name="ion:settings" />
  Settings
</Link>

External links with custom icons

<Link href="https://github.com/incluud">
  GitHub Repository
  <Icon name="ion:logo-github" slot="icon" />
</Link>

Custom external link icons

When providing a custom icon via the icon slot, ensure it clearly indicates that the link opens in a new tab for better user experience.

Accessible link practices

<!-- Link with descriptive aria-label -->
<Link
  href="/download"
  isButton
  type="success"
  ariaLabel="Download the complete user guide PDF"
>
  <Icon name="ion:download" />
  Download
</Link>

<!-- Link with title for additional context -->
<Link
  href="https://example.com"
  title="Opens in a new tab - Example website"
>
  Visit Example
</Link>

Props

Configure the Link component using these available props to customize its behavior and appearance.

Prop	Type	Default	Description
href	string	Required	The URL to link to
isExternal	boolean	false	Whether the link is external (auto-detected for http/https URLs)
hideIcon	boolean	false	Whether to hide the external link icon
isButton	boolean	false	Style the link as a button
variant	'filled' | 'outlined'	'filled'	The variant of the link when styled as button
type	'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'ghost'	'default'	Type affecting color scheme when styled as button
size	'sm' | 'md' | 'lg'	'md'	Button size when styled as button
ariaLabel	string	''	The aria-label attribute
title	string	''	The title attribute
animateOnHover	boolean	false	Whether to animate icons on hover (only when isButton is true)
animationType	'rotate' | 'boop' | 'bouncing' | 'none'	'boop'	Type of animation to apply on hover
animationIntensity	number	5	Animation intensity (1-10)
pulse	boolean	false	Whether to apply a pulsating animation
class	string	''	Additional CSS classes to apply

Accessibility

The Link component is built with accessibility as a core principle, ensuring inclusive navigation for all users:

• Semantic HTML: Uses proper anchor (<a>) elements for all links
• External link indicators: Automatically adds visual icons and screen reader text for external links
• Security attributes: External links include target="_blank" and rel="noopener noreferrer"
• Keyboard navigation: Full keyboard support with proper focus management
• Screen reader support: Contextual information for assistive technologies
• High contrast: Color combinations meet WCAG contrast requirements
• Motion preferences: Respects prefers-reduced-motion for animations
• Focus indicators: Clear focus states for keyboard navigation

External link accessibility

External links automatically include the text “Opens in a new tab” for screen readers, ensuring users with assistive technologies understand the link behavior.

Button-styled links

When using isButton={true}, the component maintains link semantics while providing button-like appearance. This is perfect for navigation actions that should behave as links but look like buttons.

Styling

Customize the Link component’s appearance while preserving its accessibility features and functionality.

Accessibility considerations

When applying custom styles, ensure you maintain sufficient color contrast ratios and preserve focus indicators for keyboard navigation.

Custom CSS

/* Option 1: Using :global() in your style block */
<style>
  :global(.link) {
    color: var(--accent-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  :global(.link--external) {
    color: var(--external-link-color);
  }

  :global(.link--external svg) {
    color: var(--accent-color);
  }

  :global(.button) {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.025em;
  }

  :global(.button.type-primary) {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-color: var(--primary-dark);
  }

  :global(.button:focus-visible) {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
  }
</style>

/* Option 2: Using is:global on the style tag */
<style is:global>
  .link {
    color: var(--accent-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .button {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.025em;
  }
</style>

Tailwind Classes

<Link
  class="font-semibold tracking-wide underline-offset-4"
  href="/custom-styled"
>
  Custom Styled Link
</Link>

<Link
  class="rounded-lg shadow-lg transform transition-transform hover:scale-105"
  href="/enhanced-button"
  isButton
  type="primary"
>
  Enhanced Button
</Link>

Style scoping

Astro components use scoped styles by default. To override component styles, you’ll need to use either :global() selectors or the is:global directive on your style tag.

Interactive examples

Explore the Link component in action with these practical examples showcasing different configurations and styling approaches.

Navigation links

Getting StartedComponentsAstro Docs Opens in a new tab GitHub Opens in a new tab

Call-to-action buttons

Get Started

View Components

Star on GitHub

Animated interactive buttons

Complete

Refresh

Important Notice

Hover over the buttons to see different animation effects!

Different sizes and variants

SmallMediumLarge

FilledOutlinedGhost

Accessible external links

Astro Framework

Incluud on GitHub

Support Us

These links provide proper context for screen readers while maintaining clean visual design.