Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Popover

    A non-modal panel with interactive content, anchored to the button that opens it.

    Storybook
    Storybook
    Source
    Source

    States

    Section titled “States”
    State Visual change Tokens
    Closed Not shown; trigger aria-expanded="false" None
    Opening Grows in from the trigger motion-popover-enter-duration, motion-popover-scale
    Open Raised panel, 1 px overlay hairline (takes no space), small shadow color-surface-raised, color-border-overlay, shadow-popup
    Closing Shrinks and fades motion-popover-exit-duration

    Measurements

    Section titled “Measurements”
    Property Value Token
    Width 240 / 320 / 400 px popover-width-sm, popover-width-md, popover-width-lg
    Padding 10 px popover-padding
    Gap between header and body 10 px popover-gap
    Default alignment Centre of the trigger (align="center") None
    Corner radius 10 px popover-radius
    Distance to the trigger 4 px (10 px with an arrow); every popup uses the same distance popup-offset
    Minimum distance to the viewport edge 16 px None
    Title style label-md text.label-md

    Tokens

    Section titled “Tokens”

    Values follow the selected brand; change the brand in the top bar.

    TokenSampleLight modeDark mode
    --bigbang-popover-width-sm240px240px240px240px240px240px
    --bigbang-popover-width-md320px320px320px320px320px320px
    --bigbang-popover-width-lg400px400px400px400px400px400px
    --bigbang-popover-padding10px10px10px10px10px10px
    --bigbang-popover-radius10px10px10px10px10px10px
    --bigbang-popover-gap10px10px10px10px10px10px
    --bigbang-color-surface-raised#ffffff#ffffff#ffffff#262626#262626#262626
    --bigbang-color-border-overlay#ededed#ededed#edededrgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)
    --bigbang-shadow-popup0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)
    --bigbang-motion-popover-enter-duration0.15s0.15s0.15s0.15s0.15s0.15s
    --bigbang-motion-popover-exit-duration0.11s0.11s0.11s0.11s0.11s0.11s
    --bigbang-motion-popover-enter-easingcubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)
    --bigbang-motion-popover-exit-easingcubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)
    --bigbang-motion-popover-scale0.960.960.960.960.960.96
    --bigbang-motion-popover-distance4px4px4px4px4px4px

    Motion and interaction

    Section titled “Motion and interaction”
    Interaction Property Duration token Easing token Reduced motion
    Enter (motion.popover) opacity, scale 0.96 → 1 from the trigger, 4 px drift motion-popover-enter-duration motion-popover-enter-easing Scale 1, distance 0; it only fades in.
    Exit opacity, scale 1 → 0.96 motion-popover-exit-duration motion-popover-exit-easing Fades only.
    Trigger Press scale (motion.press) motion-press-duration motion-press-easing Scale becomes 1.

    The panel grows from the trigger’s position (--transform-origin). See Motion for the values.