Skip to main contentCarbon Design System

Popover

Color

ElementPropertyColor token
Containerbackground-color$layer *
background-color$background-inverse

* Denotes a contextual color token that will change values based on the layer it is placed on.

Popover container colors.

Structure

The width and height of a popover container can vary depending on the amount of content within it. We recommend to not exceed a popover width size of four columns.

ElementPropertypx / remSpacing token
Containermax-width352 / 22–
padding16 / 1$spacing-05
Caret tipheight, width8 / .5–
margin-top4 / .25$spacing-02
Structure and spacing measurements for a popover container.

Structure and spacing measurements a popover container. | px / rem

Structure and spacing measurements between a popover container and trigger button.

Structure and spacing measurements between a popover container and trigger button. | px / rem