Buttonalternative
Use Button for primary actions, Link for navigationLink
Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.
Setup
import { Link } from '@fragments-sdk/ui';Examples
Default
Standard link with hover underline
Loading preview...
Variants
Visual style options
Loading preview...
Underline Styles
Different underline behaviors
Loading preview...
External Link
Link that opens in new tab
Loading preview...
As Child (Polymorphic)
Renders as a custom element while applying Link styles and composing handlers. Useful with Next.js Link for client-side navigation.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Link text content |
variant | enumdefaultsubtlemuted | default | Visual style variant |
underline | enumalwayshovernone | hover | Underline behavior |
external | boolean | false | Opens in new tab with noopener noreferrer |
asChild | boolean | false | Render as child element (polymorphic). Merges link props/classes and composes event handlers onto the single child (e.g. Next.js Link). |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |
target | union | Not set | — |
rel | string | Not set | — |
Usage Guidelines
When to use
- Inline text links within paragraphs
- Navigation links in footers or sidebars
- "Forgot password?" or "Sign up" links in forms
- External links to documentation or resources
When not to use
- Primary call-to-action (use Button instead)
- Navigation tabs (use Tabs component)
- Menu items in dropdowns (use Menu component)
- Cards that link to detail pages should still use real link semantics (Link or anchor inside Card)
Best practices
- Link text should describe the destination, not "click here"
- Use external prop for links that open in new tabs
- Use subtle variant for secondary/contextual links
- Ensure links are distinguishable from regular text
- When using asChild, Link composes event handlers with the child instead of overwriting them
Accessibility
- Link text must be descriptive of the destination
- External links should indicate they open in new window
- Links must have visible focus indicators
- Avoid using links that look like buttons without button semantics