Skip to main contentCarbon Design System

Notification

Color

Low contrast

Low contrast notifications

Low contrast notifications in the White theme

ElementPropertyColor token
Titletext color$text-primary
Subtitletext color$text-primary
Close buttonfill$icon-primary
Errorbackground-color$notification-error-background-color
border-left$support-error
svg$support-error
Successbackground-color.$notification-success-background-color
border-left$support-success
svg$support-success
Warningbackground-color$notification-warning-background-color
border-left$support-warning
svg$support-warning
Informationbackground-color$notification-info-background-color
border-left$support-info
svg$support-info

High contrast

High contrast notifications in the White theme

High contrast notifications in the White theme


ElementPropertyColor token
Titletext color$text-inverse
Subtitletext color$text-inverse
Close buttonfill$icon-inverse
Backgroundbackground-color$background-inverse
Errorborder-left$support-error-inverse
svg$support-error-inverse
Successborder-left$support-success-inverse
svg$support-success-inverse
Warningborder-left$support-warning-inverse
svg$support-warning-inverse
Informationborder-left$support-info-inverse
svg$support-info-inverse

Typography

Write notifications in sentence case, which means only the first word is capitalized. Notification titles should be concise and to the point.

ElementFont-size (px/rem)Font-weightType token
Title14 / 0.875SemiBold / 600$heading-compact-01
Subtitle14 / 0.875Regular / 400$body-compact-01

Structure

Toast notification

ElementPropertypx / remSpacing token
Notificationwidth288 / 18
border-left3px
padding-right16 / 1$spacing-05
Titlemargin-top16 / 1$spacing-05
Subtitlemargin-bottom24 / 1.5$spacing-06
Detailspadding-right16 / 1$spacing-05
Captionmargin-bottom16 / 1$spacing-05
Close buttonheight, width48 / 3
Close iconmargin-top, margin-right16 / 1$spacing-05
Structure and spacing for a toast notification

Structure and spacing measurements for a toast notification | px / rem

Inline notification

The width of an inline notification will vary based on content or layout.

ElementPropertypx / remSpacing token
Inline notificationmin-height48 / 3$spacing-09
border-left3px
Detailsmargin-left, margin-right16 / 1$spacing-05
Text-wrapperpadding-top, padding-bottom12 / 0.75$spacing-04
Iconmargin-right16 / 1$spacing-05
Close buttonheight, width48 / 3
Close iconicon size16 x 16
Structure and spacing for an inline notification

Structure and spacing measurements for an inline notification | px / rem