Icon Button
A button with only an icon. Ideal for toolbars, action menus, and compact interfaces.
Overview
No visual options. See Props for what it accepts.
All options
Color and size
| size \ color | primary | secondary | tertiary | iconOnly |
|---|---|---|---|---|
| large | ||||
| medium | ||||
| small | ||||
| tiny |
States
| state \ color | primary | secondary | tertiary | iconOnly |
|---|---|---|---|---|
| enabled | ||||
| selected | ||||
| disabled |
Loading
| loading \ color | primary | secondary | tertiary | iconOnly |
|---|---|---|---|---|
| loading |
Accessibility
Accessible name
Screen readers announce an icon button by its ariaLabel. Without one, the label falls back to the icon name, so Trash2 reads as "Trash 2". Pass a label that names the action.
Loading and disabled
While loading is true the button is disabled and its accessible name is "Loading". The disabled state renders a native disabled button, so it is skipped by Tab.