When to use
Use when a well-known action must fit in a compact toolbar or row.
Loading…
Find components, patterns, tokens, and docs
Component
Compact action that relies on a recognizable icon instead of a text label.
Preview
<IconButton
variant="ghost"
size="medium"
icon="settings"
>
Settings
</IconButton>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.