Icon Button

Icon buttons help users take supplementary actions with a single tap.

What the component handles

  • Screen reader announcements for loading and disabled state
  • Meets minimum target size requirements.

What you need to provide

  • accessibleText prop with a unique and descriptive text that explains the action (e.g., "Create new reservation ", "Edit profile", "Close dialog")
  • Additional ARIA attributes when you compose the button into larger patterns (e.g., aria-expanded for dropdowns, aria-controls for modals, aria-pressed for toggle buttons, aria-haspopup for menus)

Color contrast

All variants meet the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

  • background.static.xxx tokens except for background.static.inverse and background.static.on-color
  • in all Card variants,
  • in Banner components.