IconButton is a button containing only an icon. It provides a compact interactive element for actions like edit, delete, close, or navigation where a text label isn't necessary.
Sizes
Four sizes to fit different contexts from toolbars to prominent actions.
XLarge — 48px. Prominent standalone actions.
Large — 32px. Standard toolbar actions.
Medium — 28px. Default. Compact toolbars.
Small — 28px with smaller icon. Dense UIs.
States
Interactive states provide feedback on hover, active press, and disabled.
Default — Transparent background, icon color.
Hover — Emphasis-strong background fill.
Active — Primary-default background.
Disabled — Muted icon, no hover effect.
Related: ChevronButton
ChevronButton is a specialized IconButton that shows a chevron which rotates 180° between open/closed states.
Uses isOpen prop to control direction. Fixed size (28px circle).
Related: KebabMenu
KebabMenu wraps an IconButton (ellipsis-vertical icon) in a Popover to create a contextual actions menu.
Pass KebabMenu.Item children for each action in the menu.
Guidelines
- Always provide an
aria-labelsince icon-only buttons have no visible text. - Use IconButton for secondary or utility actions that don't need prominent text labels.
- Pair with a Tooltip for discoverability when the icon meaning isn't universally clear.
- Use the
asLinkprop when the button navigates instead of performing an action. - ChevronButton should only be used for expand/collapse toggling behavior.
Dos and Don'ts
Use universally understood icons (trash, pen, close) for icon-only buttons.
Don't use abstract icons without tooltips — users won't know what they do.