Link
Navigation
Typography
Versatile link component for navigation and actions with multiple variants and automatic external link detection.
Preview
Standard text links with underline options
Default (hover underline)
Visit our documentationAlways underlined
Read the terms and conditionsExternal link
Visit GoogleDestructive Links
Links for dangerous or irreversible actions
Button-styled Links
Links styled as buttons for prominent calls-to-action
All Variants
With Icons
Navigation Links
Links for sidebar and navigation menus with active state
Subtle Links
Low-emphasis links for secondary actions
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'inline' | 'destructive' | 'button' | 'nav' | 'subtle' | 'inline' | Link visual style |
buttonVariant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'primary' | Button style when variant="button" |
size | 'sm' | 'md' | 'lg' | 'md' | Size for button variant |
external | boolean | false | Opens in new tab, auto-detected for http(s) URLs |
underline | 'always' | 'hover' | 'none' | 'hover' | Underline behavior |
active | boolean | false | Active state for navigation links |
disabled | boolean | false | Disables the link |
leftIcon | ReactNode | — | Icon before text |
rightIcon | ReactNode | — | Icon after text |
Usage
Import and implementation examples
import { Link } from '@/components/ui/link'
import { ExternalLink, ChevronRight } from 'lucide-react'
// Inline link (default)
<Link href="/docs">Visit our documentation</Link>
// External link (auto-detected)
<Link href="https://google.com">Visit Google</Link>
// Always underlined
<Link href="#" underline="always">Terms and conditions</Link>
// Destructive link
<Link href="#" variant="destructive">Delete account</Link>
// Button-styled link
<Link href="/signup" variant="button" buttonVariant="primary">
Sign Up
</Link>
// With icons
<Link href="#" variant="button" leftIcon={<ExternalLink />}>
External Link
</Link>
// Navigation link with active state
<Link href="/dashboard" variant="nav" active={isActive}>
Dashboard
</Link>
// Subtle link
<Link href="#" variant="subtle" rightIcon={<ChevronRight />}>
Learn more
</Link>Features
Built-in functionality
- Auto external detection: Detects external URLs automatically
- Multiple variants: Inline, destructive, button, nav, subtle
- Icon support: Left and right icon positions
- Active state: Built-in active state for navigation
- All button variants: Primary, secondary, outline, ghost, destructive
- External icon: Auto-added for external links
- Underline control: Always, hover, or none
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses anchor element with hrefaria-disabled for disabled stateExternal links have rel="noopener noreferrer"External links open in new tabKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus the link |
| Enter | Follow link |
Notes
- Focus ring visible for keyboard users
- Disabled links prevent navigation
- Screen reader announces link type