Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Notification

Color

Low contrast

Low contrast notifications

Low contrast notifications in the White theme

ClassPropertyColor token
.bx--inline-notification__title
.bx--toast-notification__title
text color$text-01
.bx--inline-notification__subtitle
.bx--toast-notification__subtitle
text color$text-01
.bx--inline-notification__close-button
.bx--toast-notification__close-button
fill$icon-01
.bx--inline-notification__action-buttontext color$link-01

Error — low contrast
ClassPropertyColor token
notification--errorbackground-color$notification-error-background-color
notification--errorborder-left$support-01
svg.error--filledfill$support-01

Success — low contrast
ClassPropertyColor token
notification--successbackground-color$notification-success-background-color
notification--successborder-left$support-02
svg.checkmark-filledfill$support-02

Warning — low contrast
ClassPropertyColor token
notification--warningbackground-color$notification-warning-background-color
notification--warningborder-left$support-03
svg.warning-filledfill$support-03

Info — low contrast
ClassPropertyColor token
notification--infobackground-color$notification-info-background-color
notification--infoborder-left$support-04

High contrast

High contrast notifications in the White theme

High contrast notifications in the White theme


ClassPropertyColor token
.bx--inline-notification__title
.bx--toast-notification__title
text color$inverse-01
.bx--inline-notification__subtitle
.bx--toast-notification__subtitle
text color$inverse-01
.bx--inline-notification__close-button
.bx--toast-notification__close-button
fill$inverse-01
.bx--inline-notification
.bx--toast-notification
background-color$inverse-02

Error — high contrast
ClassPropertyColor token
notification--errorborder-left$inverse-support-01
svg.error--filledfill$inverse-support-01

Success — high contrast
ClassPropertyColor token
notification--successborder-left$inverse-support-02
svg.checkmark-filledfill$inverse-support-02

Warning — high contrast
ClassPropertyColor token
notification--warningborder-left$inverse-support-03
svg.warning-filledfill$inverse-support-03

Info — high contrast
ClassPropertyColor token
notification--infoborder-left$inverse-support-04

Typography

Notification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point.

ClassFont-size (px/rem)Font-weightType token
.bx--toast-notification__title
.bx--inline-notification__title
14 / 0.875SemiBold / 600$heading-03
.bx--toast-notification__subtitle
.bx--inline-notification__subtitle
14 / 0.875Regular / 400$body-short-01

Structure

Toast notification

PropertyPropertypx / remSpacing token
.bx--toast-notificationwidth288 / 18
.bx--toast-notificationborder-left3px
.bx--toast-notificationpadding-right16 / 1$spacing-05
.bx--toast-notification__titlemargin-top16 / 1$spacing-05
.bx--toast-notification__subtitlemargin-bottom24 / 1.5$spacing-06
.bx--toast-notification__detailspadding-right16 / 1$spacing-05
.bx--toast-notification__captionmargin-bottom16 / 1$spacing-05
.bx--inline-notification__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.

PropertyPropertypx / remSpacing token
.bx--inline-notificationmin-height48 / 3$spacing-09
.bx--inline-notificationborder-left3px
.bx--inline-notification__detailsmargin-left, margin-right16 / 1$spacing-05
.bx--inline-notification__text-wrapperpadding-top, padding-bottom12 / 0.75$spacing-04
.bx--inline-notification__iconmargin-right16 / 1$spacing-05
.bx--inline-notification__close-buttonheight, width48 / 3
close-iconicon size16 x 16
Structure and spacing for an inline notification

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