Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Modal

Color

Refer to the button for primary and secondary button styling in the transactional modal.

ClassPropertyColor token
.bx--modal-containerbackground-color$ui-01
.bx--modal-header__labeltext color$text-02
.bx--modal-header__headingtext color$text-01
.bx--modal-contenttext color$text-01
.bx--modal-close__iconfill$icon-01
.bx--modal-close:hoverbackground-color$hover-ui
Overlaycolor$overlay-01

Typography

Modal titles and labels should be set in sentence case. Keep all titles and labels concise and to the point. Modal labels are optional.

ClassFont-size (px/rem)Font-weightType token
.bx--modal-header__label12 / 0.75Regular / 400$label-01
.bx--modal-header__heading20 / 1.25Regular / 400$heading-03
.bx--modal-content14 / 0.875Regular / 400$body-long-01

Structure

ClassPropertypx / remSpacing token
.bx--modal-closeheight, width48 x 48
.bx--modal-close__iconheight, width16 x 16
.bx--modal-header__labelmargin-bottom4 / 0.25$spacing-02
.bx--modal-headerpadding top, padding left16 / 1$spacing-05
.bx--modal-headermargin-bottom16 / 1$spacing-05
.bx--modal-contentpadding-left16 / 1$spacing-05
.bx--modal-contentpadding-right20%
.bx--modal-contentmargin-bottom48 / 3$spacing-09
Structure and spacing measurements for a passive modal

Structure and spacing measurements for a passive modal | px / rem

Structure and spacing measurements for a transactional modal

Structure and spacing measurements for a transactional modal | px / rem

Margin-right

Modals that are 36% width and larger have a margin-right: 20% (margin percentage is based off the width of the modal window). If the modal is smaller than 36% then it has a fixed margin-right: 16px/1rem. Body copy, including titles, in a modal alway follows the 20% margin-right rule. However, inputs and other components may still expand to the full width of a modal window.

Margin-right for modals less than 36% and greater than 36%

Margin-right for modals less than 36% (left) and greater than 36% (right).

Sizes

There are four modal sizes: xs, small, default, large. Each modal size has a responsive width that changes based on the browser size. As the browser decreases, the modal width percentage increases thus maintaining a proper ratio between the modal and browser. Modal widths are defined as percentages of the browser but will still align to columns on the 2x grid.

Modal sizes

XS

BreakpointPercentage widthColumn spanMargin-right
158424%4 of 1616px / 1rem
131224%4 of 1616px / 1rem
105632%5 of 1616px / 1rem
67248%4 of 816px / 1rem
320100%4 of 416px / 1rem

Small

BreakpointPercentage widthColumn spanMargin-right
158436%6 of 1620%
131236%6 of 1620%
105642%7 of 1616px / 1rem
67260%5 of 816px / 1rem
320100%4 of 416px / 1rem

Default

BreakpointPercentage widthColumn spanMargin-right
158448%8 of 1620%
131248%8 of 1620%
105660%10 of 1620%
67284%7 of 820%
320100%4 of 416px / 1rem

Large

BreakpointPercentage widthColumn spanMargin-right
158472%12 of 1620%
131272%12 of 1620%
105684%14 of 1620%
67296%8 of 820%
320100%4 of 416px / 1rem

Max sizes

Each modal size has a max height and width in order to maintain a proper window ratio.

Modal sizeMax-heightMax-width
XS48%420px
Small72%576px
Default84%768px
Large96%
Modal max heights

Mobile

On mobile devices, at the smaller break points the max-height does not apply. The height may either be 100% of the screen or maintain the height defined by the content while sticking to the bottom of the mobile screen.

Modal sizes