Skip to main contentCarbon Design System

Modal

The following page documents visual specifications such as color, typography, structure, size, and AI presence.

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).

Button structure

Number of buttonsPercentage width of modalPositioning
150%Flush right
250% eachFull bleed
325% eachFlush right
325% each1 flush left, 2 flush right
Modal button sizes

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

AI presence

The following are the unique styles applied to the component when the AI label is present. Unless specified, all other tokens in the component remain the same as the non-AI variant. The AI styling spec of individual components inside of the modal can be found on their respective style tabs.

For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
Modal:backgroundbackground-color
$layer
*
box-shadow
$ai-drop-shadow
inner-shadow
$ai-inner-shadow
Overlaybackground-color
$ai-overlay
Linear gradient:backgroundstart
$ai-aura-start-sm
stop
$ai-aura-stop
Linear gradient:bordertop
$ai-border-start
bottom
$ai-border-end
AI labelsizelarge
Modal AI presence

Structure and spacing measurements for an AI Modal.