IconButton
A square, icon-only button with the tooltip and accessible name built in.
An icon on its own is never self-explanatory, so label is required: it becomes the aria-label and the tooltip text. Use this rather than a Button with size="icon" — you get the tooltip and the accessible name without having to remember either.
Sizes
md is 32px with a 16px icon and is the default. sm (24/14) and xs (20/12) are for dense inline actions — a row action in a table, a control inside a panel header.
Tones and state
tone colours the icon for success and destructive actions. active sets aria-pressed and the pressed fill — use it for controls that stay on, like a visibility toggle.
Tooltip and shortcuts
The tooltip shows label unless tooltip overrides it, and shortcut adds keyboard chips beside the text. Set showTooltip={false} when the button already sits next to its own label.
Props
IconButton
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | The icon element. Size it to match the button: 16, 14 or 12. |
label | string | — | Required. Accessible name, and the tooltip text unless `tooltip` is set. |
tooltip | string | — | Overrides the tooltip copy. |
shortcut | string | string[] | — | Keyboard chips shown in the tooltip. |
tooltipSide | "top" | "right" | "bottom" | "left" | "bottom" | Which side the tooltip opens on. |
showTooltip | boolean | true | Set false when the button is already labelled in context. |
active | boolean | false | Pressed state; also sets `aria-pressed`. |
tone | "default" | "success" | "danger" | "default" | Colours the icon for confirming or destructive actions. |
size | "md" | "sm" | "xs" | "md" | 32/16, 24/14 and 20/12 respectively. |