Actions
Icon Button
Icon Button is a compact, icon-only trigger for a single action — used when space is limited or the icon's meaning is universally understood (close, more options, edit).
Style × Size × State — 45 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Icon Button is a compact, icon-only trigger for a single action — used when space is limited or the icon's meaning is universally understood (close, more options, edit).
When to use
Toolbars, table row actions, card corner actions — anywhere a text label would be redundant given context.
When not to use
When the icon's meaning isn't obvious without a label — pair with visible text (use Button) or add a Tooltip.
Accessibility
MUST have an accessible name via aria-label, since there is no visible text. This component includes a hidden "Accessible Label" layer specifically to document what that aria-label should say per instance — never ship an instance without setting it to something real.
Common mistakes
Leaving the Accessible Label at its generic placeholder instead of describing the actual action. Using an ambiguous icon with no tooltip as a fallback.
Properties
Style × Size × State as variants. Icon (instance-swap). Accessible Label (text, hidden layer, drives aria-label in code).
Tokens used
component/radius/controlsemantic/action/primarysemantic/action/dangersemantic/surface/default