Link button
A link button navigates, but is drawn as a button.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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' | None | Same as for a button. Use primary when going there is the main task on the view. |
| spacing | 'default' | 'compact' | None | |
| isDisabled | boolean | None | Disables the link button. It is better to leave it out, since a link nobody can follow is confusing. |
| isSelected | boolean | None | |
| shouldFitContainer | boolean | None | |
| iconBefore | ReactNode | None | |
| iconAfter | ReactNode | None | |
| children | ReactNode | None | The label. Name the destination, since this takes people somewhere. |
Any other props are passed to the underlying a, so standard attributes and event handlers work as usual.
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.
- Choose between a link button and a button by what the control does, not how it looks.
- Screen reader users often list the links on a page. The label is what they hear, so name the destination.