Theme
Button link
A link drawn as a button, for calls to action that navigate. Accent is the site's one saturated blue, at most one a page, in its hero; the rest of the site uses the ink-grey primary and the outlined secondary, as Button does.
Examples
Props
ButtonLink
A link drawn as a button. It navigates, so it is an anchor that works before any script loads; a Button is for an action on the page.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | |
variant? | ButtonLinkVariant | "secondary" | primary for the page's main action, secondary beside it, quiet for a minor one. accent is the site's one saturated call to action: at most one a page, in its hero. |
arrow? | boolean | false | End with an arrow, for a link that leads on to more. |
as? | ElementType | "a" | The component that renders the anchor, for a framework's client-side link (Next.js's `Link`, say). The system itself knows no router. |
children | ReactNode | — |
Also takes 282 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Enter | Follows the link |
Accessibility
- An anchor, not a button: it navigates, and works before any script loads. Use Button for an action on the page.
- White on the accent fill reaches 5.06:1, and 7.78:1 in high contrast; hover deepens the blue, so it only gains contrast.
- Every variant has a border, so its edge survives forced-colours mode.
- An arrow after the words is hidden from screen readers and mirrors in right-to-left text.