Link
Link is a styled anchor component with variant support, external link handling, and a disabled state.
Variants
vue
<Link href="#">Default link</Link>
<Link href="#" variant="subtle">Subtle link</Link>
<Link href="#" variant="inverse">Inverse link</Link>External link
External links automatically add target="_blank" rel="noopener noreferrer" and display a small ↗ icon.
vue
<Link href="https://example.com" external>Visit example.com</Link>Disabled
When disabled, renders as a <span> (non-interactive) with reduced opacity.
Disabled defaultDisabled subtle
vue
<Link href="#" disabled>Disabled default</Link>
<Link href="#" variant="subtle" disabled>Disabled subtle</Link>Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | The URL the link points to |
variant | 'default' | 'subtle' | 'inverse' | 'default' | Visual color style |
external | boolean | false | Opens in a new tab and appends a ↗ icon |
disabled | boolean | false | Renders as a non-interactive span |
Emits
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Fired when the link is clicked |