Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Dialog

    A modal window over the page that holds focus for one task or decision.

    Storybook
    Storybook
    Source
    Source

    States

    Section titled “States”
    State Visual change Tokens
    Closed Not shown None
    Opening The panel fades in, rises 8 px and grows from 96 %; the backdrop darkens motion-dialog-enter-duration, motion-dialog-distance, motion-dialog-scale
    Open Raised panel with a 1 px overlay hairline and the shadow-overlay shadow, lightly dimmed backdrop blurred by 4 px color-surface-raised, color-border-overlay, shadow-overlay, color-surface-scrim, blur-surface-scrim
    Closing The panel shrinks and fades; the backdrop clears motion-dialog-exit-duration
    Bottom sheet (< 640 px) Full width, square bottom corners dialog-radius

    Measurements

    Section titled “Measurements”
    Property Value Token
    Width 400 / 560 / 720 px dialog-width-sm, dialog-width-md, dialog-width-lg
    Padding 16 px; 24 px from 640 px up dialog-padding-sm, dialog-padding-md
    Gap between header, body and action band 16 px space-xl
    Gap between title and description 8 px space-md
    Distance to the viewport edge 16 px dialog-margin
    Corner radius 14 px dialog-radius
    Title style title-sm (16 px medium on a single-line height) text.title-sm
    Body style body-md text.body-md
    Action band surface-layer-1 fill, 1 px top line, 16 px padding; below 640 px actions stack full width (primary on top), from 640 px one row at the end color-surface-layer-1, color-border-subtle, dialog-padding
    Gap between actions 8 px space-md
    Close button inset 8 px space-md

    xl is 960 px wide (dialog-width-xl), for long reviews. full fills the viewport inside dialog-margin.

    Tokens

    Section titled “Tokens”

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

    TokenSampleLight modeDark mode
    --bigbang-dialog-width-sm400px400px400px400px400px400px
    --bigbang-dialog-width-md560px560px560px560px560px560px
    --bigbang-dialog-width-lg720px720px720px720px720px720px
    --bigbang-dialog-radius14px14px14px14px14px14px
    --bigbang-dialog-padding-sm16px16px16px16px16px16px
    --bigbang-dialog-padding-md24px24px24px24px24px24px
    --bigbang-dialog-margin16px16px16px16px16px16px
    --bigbang-color-surface-raised#ffffff#ffffff#ffffff#262626#262626#262626
    --bigbang-color-surface-layer-1#f5f5f5#f5f5f5#f5f5f5#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-overlay0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)
    --bigbang-color-border-subtle#ededed#ededed#ededed#303030#303030#303030
    --bigbang-color-surface-scrimrgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)
    --bigbang-dialog-backdrop-blur4px4px4px4px4px4px
    --bigbang-motion-dialog-enter-duration0.24s0.24s0.24s0.24s0.24s0.24s
    --bigbang-motion-dialog-exit-duration0.15s0.15s0.15s0.15s0.15s0.15s
    --bigbang-motion-dialog-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-dialog-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-dialog-scale0.960.960.960.960.960.96
    --bigbang-motion-dialog-distance8px8px8px8px8px8px

    Motion and interaction

    Section titled “Motion and interaction”
    Interaction Property Duration token Easing token Reduced motion
    Panel enter (motion.dialog) opacity, 8 px rise, scale 0.96 → 1 motion-dialog-enter-duration motion-dialog-enter-easing Scale becomes 1 and distance 0; the panel only fades in.
    Panel exit opacity, scale 1 → 0.96 motion-dialog-exit-duration motion-dialog-exit-easing Fades only.
    Backdrop (motion.scrim) opacity Same as the panel Same as the panel Unchanged.
    Action buttons Press scale (motion.press) motion-press-duration motion-press-easing Scale becomes 1.

    See Motion for the values.