Icon Button
A compact icon-only control for an action.
IconButton triggers a familiar compact action, such as closing a panel, deleting a row, or adding
an item. Give every icon button an accessible name because it has no visible label.
Size
medium is the default. Use small for compact toolbars and dense row actions. Keep controls in a
group at the same size.
Appearance
IconButton uses the same appearance options as Button. solid
is the default. Choose subtle or ghost when a secondary control needs less emphasis.
Tone
Use tone to communicate intent. neutral is the default, accent identifies a primary action,
and danger marks a destructive one.
Pending and Actions
IconButton uses the same pending and Action behaviour as Button.
See Button’s Pending and Actions guidance.
Disabled
Set isDisabled when the action is unavailable. Disabled controls cannot receive focus or respond
to presses.
Accessibility
Provide aria-label or aria-labelledby for every icon button. Name the action, not the icon. Use
a labelled Button when the icon is unfamiliar or visible text would
make the action clearer.
API
IconButtonProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type