Popover container

ECT approvedUpdated May 21, 2026

Popover, Popout

Description

A popover container is a flexible overlay container that's triggered by a button.
It supports custom content (for example: text, layout, embedded components), rather than a menu of actions.
It keeps users in context by revealing additional information or lightweight interaction only when needed.

Warning

Choosing the right popover container Use a Popover container when you need to offer custom content or contextual information that is not a list of actions. Use an Action popover button when presenting a menu of actions or commands related to an item. See when to use each action button type in the comparison table

Anatomy

Anatomy

Size

Available with button sizes S, M, and L.
The width and height of the popover menu adjust to the width and height of the customized content.
The popover menu width must never be less than the trigger button width.

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

The trigger button has the usual button states.
The popover container itself doesn't have any states.
Interactive components within the container have states.

Component-specific states

Container closed

Container open

Variations

Position

The container appears relative to its trigger and may be positioned to the left or right, depending on available space.
If needed, the container can be positioned directly covering the trigger. See an example in the Notification centre

Container position - left

Container position - right

Roundness

Moderate

Curved

Padding

Any padding can be used with any size container.
The curved borders on the pink content area are for illustration only.

Container padding - S

Container padding - M

Container padding - L

Optional elements

Optional elements can be combined.

Heading

Close button

Scrollbar

Color mode

Light

Dark

Dos and don'ts

Don't

Technical example

Popover container component implemented in Carbon.

Requirements

Users should be able to:

Navigate to and activate the button.
Activate the button to open a popover container 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 content.
Make sure the container appears is near to the button.
Use clear, concise button names to help users understand the container'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
March 2026	Added this new component and documentation to align with Carbon offering.