Dropdown Button

A Dropdown Button groups multiple actions in one triggering UI element, optimizing the space in condensed areas or action-heavy pages.

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

Preferably, a unique and descriptive button text that explains the action or use aria-label attribute to provide more context for screen reader users (also applicable to Dropdown Footer Actions if used).

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.