forms contract
IconButton
Square button rendering only an icon. For dense toolbars, table rows, and headers where a label would crowd the layout.
Variants
- ghost
- No background — for header/toolbar density
- subtle
- fill.tertiary background; appears on hover when listed in a row
- solid
- Tinted, used inside floating action contexts (FAB)
Sizes
- sm
- 28×28pt, 16pt icon
- md
- 36×36pt, 20pt icon
- lg
- 44×44pt, 24pt icon — minimum for touch surfaces
Slots
- icon
- Single icon node
Example
<IconButton variant="ghost" size="md" aria-label="Settings"><SettingsIcon /></IconButton>Usage rule
`aria-label` is required and must describe the action, not the icon.
The full IconButton contract has 4 more rules and 1 more example, plus the do-not patterns. Get the full recipe.