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