Action popover, Multi-action
Component preview
No live controls configured for this component.
Action popover button
ECT approvedUpdated May 23, 2026
Description
- An action popover is a menu overlay that displays a list of actions when triggered by the button.
- It's typically used on a table where the actions apply to the whole table, a table row, or a table cell.
- An action popover saves space as the action list appears only when a user opens it.
Anatomy
Anatomy Typical
Size
- Available in sizes S, M, and L.
- XS button is only for use in a S table.
- The width and height of the popover menu adjust to the width and height of the action items.
- The popover menu width must never be less than the trigger button width.
States
Both trigger button and action items have states.
Component-specific states
Menu close
Menu open
Variations
Action items
Icon
Submenu
Optional elements
Scrollbar
Grouped
Trigger button label
When a selected action triggers a persistent view (such as a time period or mode), the trigger button label can optionally update to display the selected action.
This helps users understand the current context without reopening the menu.
Trigger label behavior
Menu position
Menus should open below the trigger by default.
Menu position is resolved automatically based on available space and should not be manually configured.
See edge case guidance in the Button overview page
Menu below, position right (default)
Menu below, position left
Submenu position
Submenu position is resolved automatically based on available space, and independently of menu position.
The following examples show possible submenu positions. The trigger button and menu position are hidden for clarity.
Submenu below, position right (default)
Submenu below, position left
Submenu above, position right
Submenu above, position left
Submenu on small screens
Color mode
Light
Dark
Dos and don'ts
Do
Do
Do
Do
Do
Don't
Technical example
Requirements
Users should be able to:
- Navigate to and activate the button.
- Activate the button to open a popover containing of secondary content.
- Navigate to interactive elements within the popover and activate them.
Interactions
Mouse interactions
- Popovers are displayed or hidden on click of the button, not on hover.
- Popovers remain displayed until an action is completed, the button is clicked again, or the user clicks outside of the button and dropdown area.
Keyboard interactions
- Tab. Moves focus from the previous interactive element to the button.
- When activated, it moves focus between interactive elements within the popover.
- When focus is moved out of the menu, the popover is dismissed.
- Space or Enter. Activates the button, which triggers the display of the popover and any secondary actions.
- If secondary actions are links, activate using Enter.
- If secondary options are buttons, activate using Enter or Space.
- Escape. Dismisses the dropdown menu.
Design considerations
- Use a visual cue to show that the button has additional actions.
- Make sure the dropdown near to the button.
- Use clear, concise button names to help users understand the button's purpose.
- Make sure the accessible name of the button matches the visible name.
Development considerations
- Buttons should have clear accessible names, given by the inner button text.
- If multiple buttons have the same name, use aria-describedby to specify the content each button relates to.
- Give the button an aria-expanded attribute to let screen reader users know the state of the button, and that it has additional actions.
- The secondary actions and options should be contained within a div with a unique idwhich is trageted by the aria-controls of the button.
- The relationship between the button and the content area should be conveyed using aria-controls.
| Date | Changes |
|---|---|
| February 2026 | Enhanced menu and submenu Variations guidance.Updated popover labels from "Option" to "Action" throughout.Added trigger button label guidance to Variations. |
| September 2025 | Added guidance for maximum menu height in Dos and dont's. |
| April 2025 | Removed ‘match trigger’ variants (default, hover and open).Simplified popover menu structure.Updated the page to have the latest changes. |
| February 2025 | Changed name of 'button: popover' to 'button: action popover' to align with carbon nomenclature after audit discussions.This page is now merged to be a sub-page of the Button (overview) page. Content remains unchanged. |
| October 2024 | Updated Variations by adding Custom variations, and On surface. |
| September 2024 | New version created: “Action popover” and “Button multi-action” are now combined as “Button popover”. Previous versions archived in the frozen Product design system:Action pop-overButton: multi-action majorButton: multi-action minor |