Form Elements
Icon Button
Icon button contain only an icon and do not include text labels. It is used to represent common actions in a compact and visually efficient manner. Common examples include search button, close button and menu button.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Required ariaLabel provides the accessible name (WCAG 4.1.2), without it the button is unusable by screen readers
- L (48px) and XL (56px) sizes meet the 44×44px minimum touch target (WCAG 2.5.5)
- Decorative icon hidden from assistive tech with aria-hidden="true"
- 2px focus ring with 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet or exceed 3:1 for icon glyph against background (WCAG 1.4.11)
- Semantic HTML button element for proper keyboard and assistive technology support
- aria-disabled attribute communicates the disabled state
When to use this component
✓Do's
- •You need a compact action in a toolbar, table row, or card header
- •The icon is universally understood (search, close, delete, edit)
- •Space is limited and a labelled button would cause clutter
- •You can pair it with a tooltip to reveal the label on hover
- •You always supply an aria-label describing the action
✗Don'ts
- •For primary calls to action, use a labelled Button instead.
- •For actions that require text to be understood, use a labelled Button instead.
- •If you cannot provide an aria-label, use a labelled Button instead.
- •For navigation between pages or sections, use a Link.
- •For persistent settings, use a Switch.
Do's and Don'ts
✓ Do's
Use clear, universally understood icons and always supply an aria-label describing the action.
✗ Don'ts
Don't ship icon buttons without an aria-label, they are invisible to screen readers and fail WCAG 4.1.2.
✓ Do's
Use the danger variant for destructive actions and an L/XL size so the touch target meets 44px.
✗ Don'ts
Don't use an icon button as the primary CTA on a form, a labelled Button is clearer for high-stakes actions.