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. In React, use Button with aria-label and an icon child or leadingIcon — the same currentColor foreground contract as labelled Button, not a separate component.
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