Link button
A link button navigates, but is drawn as a button.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { LinkButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | — | As for a button. Primary for a destination that is the point of the view. |
| spacing | 'default' | 'compact' | — | |
| isDisabled | boolean | — | A disabled link button. Prefer leaving it out entirely, since a link nobody can follow is confusing. |
| isSelected | boolean | — | |
| shouldFitContainer | boolean | — | |
| iconBefore | ReactNode | — | |
| iconAfter | ReactNode | — | |
| children | ReactNode | — | The label. It names the destination, because this navigates. |
Anything else you pass is forwarded to the underlying a, so the standard attributes and event handlers work as they normally would.
Accessibility
What the component does for you, and what it needs from you.
- It is an anchor, so it behaves like a link on the keyboard: Enter follows it and Space does not.
- That difference from a button is exactly why the choice between them should follow what the control does, not how it looks.
- The label names the destination, which is what a reader hears when listing the links on a page.