Icon Button
Compact icon-only action button with an accessible label.
Use IconButton for compact actions where an icon can carry the visible UI. Always provide an
accessible label.
<IconButton icon="add" aria-label="Add item" />Best practices
| Guidance | Practices |
|---|---|
| Do | Name the action in aria-label, such as "Delete row". Do not name the icon. |
| Do | Use tone="danger" for destructive icon actions such as delete. |
Tone and appearance
IconButton shares Button's appearance API. Tone can be neutral (default), accent, or danger.
Appearance can be solid (default), subtle, or ghost.
Size
Pending
Set isPending while an action is in flight. The button remains focusable but cannot be pressed
again. It uses the disabled visual treatment and replaces the icon with a busy cue.
Accessibility
IconButton has no visible text label. Always provide aria-label or aria-labelledby. Without
one, screen readers have no way to announce the button's purpose.
<IconButton icon="search" aria-label="Search orders" />When to use vs Button
Use IconButton when the icon alone communicates the action and space is tight, such as in
toolbars, table row actions, or close buttons.
Use Button when you need a visible text label. Labels are clearer for unfamiliar users.
Props
Prop
Type