Notification

Color

ClassPropertyColor token
titletext color$text-01
subtitletext color$text-01
close-iconfill$icon-01
notification--errorbackground-color#fff0f1
notification--errorborder-left$support-01
svg.error--filledfill$support-01
notification--successbackground-color#dafbe4
notification--successborder-left$support-02
svg.checkmark-filledfill$support-02
notification--warningbackground-color#fff0f1
notification--warningborder-left$support-03
svg.warning-filledfill$support-03
notification--infobackground-colorrgba(253,209,58,.15)
notification--infoborder-left$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