Button
A button triggers an event or action. Its label tells users what will happen next.
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 { Button } 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 | One primary per view. Danger is for something that cannot be undone. Link is for an action inside a sentence. |
| spacing | 'default' | 'compact' | None | Compact for a dense row such as a table. Default everywhere else. |
| isDisabled | boolean | None | Use only when people can tell why. If there is no visible reason, people get stuck. |
| isSelected | boolean | None | For a button holding a state, such as one in a toolbar that is currently on. |
| shouldFitContainer | boolean | None | Stretches the button to its container, for a narrow column or a mobile width. |
| iconBefore | ReactNode | None | An icon before the label, to help people recognise the action. The label still says what it does. |
| iconAfter | ReactNode | None | An icon after the label, usually a chevron to show that more options will open. |
| children | ReactNode | None | The label. A verb saying what will happen. |
Any other props are passed to the underlying button, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- The label is the accessible name, so vague labels like OK and Submit also cause accessibility problems.
- You can reach a button with Tab and activate it with Enter or Space. A clickable div does none of this.
- A disabled button stays in the reading order so people can still find it. Make the reason it is disabled visible.
- In the dark theme, every bold background gets lighter and uses dark text, so the text colour depends on the background.