Skip to main content

Button Groups

Button groups allow selection from a similar or related set of options.

Accessibility

  • Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars.
  • Use aria-label or aria-labelledby to label them.
  • Use the <button type="button"> element. Don’t use <a> or <span> because screen readers won’t recognize it as a usable button.
  • Make sure all the buttons within the button group are focusable and part of a linear tabbing sequence.
  • When using an icon-only button group, each button must have a Tooltip.
Last updated September 2, 2024.