When to use
Use when a well-known action must fit in a compact toolbar or row.
Loading…
Find components, patterns, tokens, and docs
Documentation
Icon buttons save space in dense toolbars, tables, and editors.
Reserve for well-known actions and always provide an accessible name.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use when a well-known action must fit in a compact toolbar or row.
Don't use when the icon is ambiguous — prefer a labeled button.
Lets frequent actions stay visible without crowding the layout.
Icon-only buttons need an aria-label or visually hidden text. Small sizes often miss the 44×44px touch target.
<IconButton
variant="ghost"
size="medium"
icon="settings"
>
Settings
</IconButton>