IconButton
Square Button variant where the only child is an icon. Carbon-spec: same kind matrix as Button, square sizes, requires `aria-label` for accessibility.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { IconButton } from "@avala/design"; <IconButton kind="ghost" size="md">IconButton</IconButton>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-iconbutton--defaultOpen in Storybook →
When to use
- Toolbar / table-row triggers where space is tight and the icon's meaning is unambiguous (close, edit, delete, more-actions).
- Wrap with `Tooltip` so the
aria-labeltext also surfaces visually on hover.
When not to use
- Any trigger where text would fit → use `Button`. Icon-only loses meaning for users who don't recognise the glyph.
- Action menus with multiple options → use `DropdownMenu` anchored to an IconButton (typical pattern).