Button

A button triggers an event or action. They let users know what will happen next.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { Button } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
appearance	'default' \| 'primary' \| 'subtle' \| 'warning' \| 'danger' \| 'discovery' \| 'link'	—	One primary per view. Danger is for something that cannot be undone. Link is for an action that has to sit in a sentence.
spacing	'default' \| 'compact'	—	Compact for a dense row such as a table. Default everywhere else.
isDisabled	boolean	—	Use only when the reader can tell why. A button disabled for no visible reason is a dead end.
isSelected	boolean	—	For a button holding a state, such as one in a toolbar that is currently on.
shouldFitContainer	boolean	—	Stretches the button to its container, for a narrow column or a mobile width.
iconBefore	ReactNode	—	An icon ahead of the label, for recognition. The label still carries the meaning.
iconAfter	ReactNode	—	An icon after the label, usually a chevron saying that more will open.
children	ReactNode	—	The label. A verb saying what will happen.

Anything else you pass is forwarded to the underlying button, so the standard attributes and event handlers work as they normally would.

What the component does for you, and what it needs from you.

The label is the accessible name, which is why OK and Submit are an accessibility problem as much as a copy one.
A button is reachable with Tab and fires on both Enter and Space, none of which a clickable div does.
A disabled button stays in the reading order so it can still be found and read, which is why the reason for it must be visible.
In dark every bold ground lightens and takes dark text, so the text colour follows the ground rather than being fixed.