Link
Takes the reader somewhere else: another page, a section, a resource. Use it on its own for “View all” and “Learn more”, or inline inside a sentence. For an action that changes something, use a Button.
Live preview
Rendered by the component itself from the same generated tokens as the rest of the site.
<Link href="/docs/components" icon="arrow-right">
View all components
</Link>Installation
Install it with the shadcn CLI, along with everything it uses. New project? Set it up first, as Quick start shows.
npx shadcn@latest add https://www.graphite-ui.com/r/link.jsonimport { Link } from '@/components/ui/link'Anatomy
The label in primary, with no underline, and an optional trailing glyph 8 after it. An inline link drops the glyph, takes an underline and the size of the text around it.
- LabelRequiredSays where the link goes. Never "click here".
- Trailing iconOptionalThe kit's Icon and Swap icon, a 20px glyph at Large and 16px at Medium and Small, 8 after the label (the kit draws fi-rs-arrow-right). Standalone only. Decorative.
Variants
Size sets the type: Body/2, Body/3 or Caption/1, with a 20px glyph at Large and 16px below. Inline is underlined and sits in running text. Inverse is for the inverse fill.
Read about every component in the gallery.
States
Hover darkens the label to primary-hover. Focus is a 1px ring outside the label; Active keeps the ring and turns the label on-surface. Visited is drawn the same as Enabled. Disabled is primary-disabled-content and is not followed.
API reference
Generated from the contract, versioned with it, and checked by drift-check. This table cannot describe props the component does not have.
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | — | The kit's Size, Caption/1, Body/3 or Body/2. Large by default, as the kit's set is. |
| inline | boolean | — | The kit's Inline. Underlined and flowing as text, taking the surrounding type; it takes no icon. |
| inverse | boolean | — | The kit's Inverse, for a link on the inverse fill. |
| icon | — | — | A kit icon name for the trailing glyph. |
| disabled | boolean | — | Renders without an href and with aria-disabled, so it is announced but not followed. |
| href and the native anchor props | — | — | Passed through. Link is a native anchor. |
Design tokens
Every swatch is live. Change the source color in the header and this table repaints, because it reads the same roles the component does.
primaryThe label and glyph at rest and visited, primary-hover on hover, primary-focus for the 1px focus and active ring, and primary-disabled-content when disabled (Link/link-primary and state/* in the kit).on-surfaceThe label while pressed (Text/text-primary in the kit).primary-containerThe inverse label at rest. The kit's inverse/link stops sit on the accent ramp at tones the engine does not stamp; this is the stand-in Notification's inverse action already uses.backgroundThe inverse label on hover and while pressed, and the inverse focus ring, the inverse fill's own text.textBody/2, Body/3 and Caption/1.spacingThe 8px gap before the glyph.
Usage
The contract's prohibitions, written as the choices you will actually face.
Do
- Write the label as the destination: “View all components”, not “Click here”.
- Use an inline link inside a sentence, where the underline tells it apart from the copy.
- Use the trailing arrow on a standalone link that leads onward, such as “Learn more”.
- Use the inverse form on the inverse fill, such as a high-contrast Notification.
Don’t
- Use a Link for an action that does not navigate. That is a Button.
- Put an icon on an inline link.
- Rely on colour alone to show a link inside text. Inline links keep their underline.
- Restyle Breadcrumb’s crumbs as Links. They are the kit’s own set.
Accessibility
What the component does for you, and what it leaves to you.
- Roles
- A native
awith anhref. Disabled drops thehrefand keepsrole="link"witharia-disabled, so it is announced but not followed or focused. - Keyboard
- Tab reaches it and Enter follows it, as any anchor.
- Names
- The label is the name. The glyph is decorative and hidden from assistive tech.
- Focus
- A 1px
--graphite-primary-focusring outside the label, in--graphite-backgroundon the inverse fill. - Contrast
- Inline links are underlined, so colour is never the only cue.
Figma parity
The kit’s Link page has one public set, Link. The code is one component with every axis.
| Kit axis | Values | Code | How it maps |
|---|---|---|---|
| Size | Large · Medium · Small | size | Body/2 with a 20px glyph, Body/3 and Caption/1 with 16px. |
| State | Enabled · Hover · Focus · Active · Visited · Disabled | disabled | Hover, Focus and Active are pseudo-classes (governance rule 7). Visited is drawn the same as Enabled, so there is no rule for it. |
| Inverse | False · True | inverse | The kit’s inverse/link stops are tones the engine does not stamp: primary-container at rest, background on hover and press. |
| Icon / Swap icon | Boolean · instance | icon | A kit icon name; the kit’s default is fi-rs-arrow-right. The kit keeps the glyph primary in every state; here it follows the label. |
| Inline | Boolean | inline | The kit’s property shows a second, identical label with no underline. The set’s description says inline is underlined, so the code underlines it. |