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-bottom8 / 0.5$spacing-03
.bx--modal-contentwidth75%
.bx--modal-contentpadding-left16 / 1$spacing-05
.bx--modal-contentmargin-bottom48 / 3$spacing-09
.bx--btn--primarywidth50%
.bx--btn--secondarywidth50%
Structure and spacing measurements for passive modal

Structure and spacing measurements for a Passive Modal | px / rem

Structure and spacing measurements for transactional modal elements

Structure and spacing measurements for a Transactional Modal | px / rem

Mobile

Modals should be full screen on mobile.

Modal on mobile

Example of a Modal on a mobile screen