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