Icon button
An icon button shows an icon instead of a label.
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 { IconButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode | None | The icon. Use one people already know, because there is no visible label. |
| label * | string | None | What the button does. It is the only name the button has, so it is required. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | None | As for a button. Subtle is the usual choice in a toolbar. |
| spacing | 'default' | 'compact' | None | Compact for a dense row. |
| shape | 'default' | 'circle' | None | Circle for a control that floats over content. Default everywhere else. |
| isSelected | boolean | None | For a button holding a state, such as a toolbar toggle that is on. |
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 required because there is no visible text. Without it, screen reader users cannot tell what the button does.
- The icon is hidden from screen readers, so the label is not announced twice.
- The target is 32px by default, so it is easy to hit even though the icon is smaller.