Stable
Icon Button is an icon-only button (no text label), used in toolbars, action menus, and other space-constrained contexts. An aria-label is required to provide an accessible description.
Anatomy
- Container — Fixed 56×56px (rounded/square); rectangle is wider horizontally
- Icon — 24×24px, color follows the variant
- State Layer — Background color changes on hover/press
Three Shapes
| Shape | Radius | Use Case |
|---|
| rounded | 999px (full circle) | Floating action buttons (FAB), primary icon actions |
| square | 16px | Toolbars, card actions |
| rectangle | 24px + wider horizontally | Horizontal layouts, pill shape |
Three Fill Styles
| Style | Appearance | Use Case |
|---|
| filled | Colored background + white icon | Primary actions, high priority |
| outline | Transparent background + colored border + colored icon | Secondary actions |
| ghost | No background, no border + colored icon | Low-interference actions, toolbars |
Accessibility (Important)
Icon Button has no visible text — an aria-label is required:
<IconButton icon={<SearchIcon />} aria-label="Search" />
| Requirement | Details |
|---|
aria-label | Required, describes the button action |
| Focus ring | 2px brand-pink focus ring on keyboard focus |
| Contrast | Icon-to-background contrast ≥ 4.5:1 |
