Link
Markdown for agentsInline link primitive with default/muted/underline/arrow/external variants, asChild router support and safe external handling.
npx slipstream-ui@latest add linkVariants
Default: read the docs · muted: changelog · underline: privacy
Arrow: browse components →
External (auto): GitHub(opens in a new tab)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Destination URL (or pass it on the asChild element). |
| variant | 'default' | 'muted' | 'underline' | 'arrow' | 'external' | 'default' | Visual style. |
| asChild | boolean | false | Render the child (router Link) with link styling. |
| external | boolean | — | Force external handling. Absolute http(s) URLs are auto-detected; mailto/tel never open a new tab. |
Accessibility
- Renders a real <a href>, so middle-click and modified clicks behave like the platform.
- External links get rel="noopener noreferrer" and an sr-only “opens in a new tab” note.
- Focus ring is visible on keyboard focus.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.