IconButton
stableserver-safe
A square button holding a single glyph. The label prop is required, not optional.
With a required label
There is no visible text to name the control, so `label` becomes its accessible name. The type system enforces it.
<IconButton label="Dismiss">
<IconX />
</IconButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Accessible name. Describes the action, not the glyph: 'Dismiss', not 'X icon'. |
| children* | ReactNode | — | The icon. |
Guidance
Do
- Pair with a Tooltip when the glyph isn't universally understood.
Don't
- Don't use icon-only buttons for destructive actions a user can't undo — spell those out.
Accessibility
`label` lands on aria-label, so the button is announced even though it shows no text.
A tooltip is not a substitute: it never appears on touch and never takes focus.