Link
Links allow users to navigate to different pages or sections with various styling options.
Import
Usage
Variants
States
Default Variant States
Underlined Variant States
When using the underlined variant, the active state hides the underline animation
Colors
Sizes
With Icons
Start Content
End Content
External
Disabled
Custom Implementation
Custom Classes
Use className to apply custom Tailwind classes for unique effects
Next.js Link Integration - asChild
Next.js Link
Combine Next.js Link with Link component styling using asChild
Data Attributes
- -
data-slot="link"Main link element identifier
Accessibility
Keyboard Support
- -
EnterActivates the link - -
TabMoves focus to the next focusable element
ARIA Attributes
- -
aria-disabledSet when link is disabled - -
aria-labelAccessible label for the link when the link text isn't descriptive enough
Link Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the link text. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | 'default' | The color scheme of the link. |
| variant | 'default' | 'underlined' | 'default' | The visual style variant of the link. The underlined variant shows an animated underline on hover that expands from center outward. |
| state | 'none' | 'active' | 'inactive' | 'none' | The visual state of the link. Inactive links have 60% opacity. |
| disabled | boolean | false | Whether the link is disabled. |
| startContent | ReactNode | - | Content to display before the link text (e.g., icons). |
| endContent | ReactNode | - | Content to display after the link text (e.g., icons). |
| external | boolean | false | Whether the link is external (adds target='_blank' and rel='noopener noreferrer'). |
| asChild | boolean | false | Render as a different element using Radix Slot. |
| href | string | - | The URL the link points to. |
