Skip to main contentCarbon Design System

Modal

Color

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

ElementsPropertyColor token
Containerbackground-color$layer *
Header labeltext color$text-secondary
Headertext color$text-primary
Contenttext color$text-primary
Close iconfill$icon-primary
Close icon:hoverbackground-color$layer-hover *
Page overlaycolor$overlay

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

Typography

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

ElementFont-size (px/rem)Font-weightType token
Label12 / 0.75Regular / 400$label-01
Heading20 / 1.25Regular / 400$heading-03
Content14 / 0.875Regular / 400$body-01

Structure

ElementPropertypx / remSpacing token
Close buttonheight, width48 x 48
Close iconheight, width16 x 16
Header labelmargin-bottom4 / 0.25$spacing-02
Headerpadding top, padding left16 / 1$spacing-05
margin-bottom16 / 1$spacing-05
Contentpadding-left16 / 1$spacing-05
padding-right20%
margin-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 always 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: extra small, small, medium, and 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

Extra small (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 (sm)

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

Medium (md)

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 (lg)

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 in order to maintain a proper window ratio.

Modal sizeMax-height
Extra small (xs)48%
Small (sm)72%
Medium (md)84%
Large (lg)96%
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