Split Button

A Split Button combines a Button with main action, and a Dropdown Button with related, secondary actions.

What the component handles

  • aria-expanded state management (false when closed, true when open)
  • aria-haspopup="menu" to indicate the button opens a menu
  • Keyboard navigation with Enter, Space, and Arrow keys
  • Focus management when dropdown opens and closes
  • Escape key closes the dropdown and returns focus to button

What you need to provide

  • Clear, descriptive text for the main button action
  • aria-label for the "more" button to describe the dropdown trigger (e.g., "More options")

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.