Icon button
An icon button shows an icon instead of a label.
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 { IconButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode | — | The glyph. It should be one readers already know, because there is no label to fall back on. |
| label * | string | — | What the button does. It is the only name the button has, so it is required. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | — | As for a button. Subtle is the usual choice in a toolbar. |
| spacing | 'default' | 'compact' | — | Compact for a dense row. |
| shape | 'default' | 'circle' | — | Circle for a control floating over content, default everywhere else. |
| isSelected | boolean | — | For a button holding a state, such as a toolbar toggle that is on. |
Anything else you pass is forwarded to the underlying button, 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.
- The label is required because there is no visible text, which makes this the component where a missing name is fatal rather than untidy.
- The icon itself is hidden from the reading order, so the label is not announced twice.
- The target is 32px by default, which stays large enough to hit even though the glyph inside is smaller.