Notification

Low contrast notifications in the White theme

Element	Property	Color token
Title	text color	`$text-primary`
Subtitle	text color	`$text-primary`
Close button	fill	`$icon-primary`
Error	background-color	`$notification-error-background-color`
	border-left	`$support-error`
	svg	`$support-error`
Success	background-color.	`$notification-success-background-color`
	border-left	`$support-success`
	svg	`$support-success`
Warning	background-color	`$notification-warning-background-color`
	border-left	`$support-warning`
	svg	`$support-warning`
Information	background-color	`$notification-info-background-color`
	border-left	`$support-info`
	svg	`$support-info`

High contrast notifications in the White theme

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

Element	Font-size (px/rem)	Font-weight	Type token
Title	14 / 0.875	SemiBold / 600	`$heading-compact-01`
Subtitle	14 / 0.875	Regular / 400	`$body-compact-01`

Element	Property	px / rem	Spacing token
Notification	width	288 / 18	–
	border-left	3px	–
	padding-right	16 / 1	`$spacing-05`
Title	margin-top	16 / 1	`$spacing-05`
Subtitle	margin-bottom	24 / 1.5	`$spacing-06`
Details	padding-right	16 / 1	`$spacing-05`
Caption	margin-bottom	16 / 1	`$spacing-05`
Close button	height, width	48 / 3	–
Close icon	margin-top, margin-right	16 / 1	`$spacing-05`

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

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

Element	Property	px / rem	Spacing token
Inline notification	min-height	48 / 3	`$spacing-09`
	border-left	3px	–
Details	margin-left, margin-right	16 / 1	`$spacing-05`
Text-wrapper	padding-top, padding-bottom	12 / 0.75	`$spacing-04`
Icon	margin-right	16 / 1	`$spacing-05`
Close button	height, width	48 / 3	–
Close icon	icon size	16 x 16	–

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

The width of a callout will vary based on content or layout.

Element	Property	px / rem	Spacing token
Callout	min-height	48 / 3	`$spacing-09`
	border-left	3px	–
Details	margin-left, margin-right	16 / 1	`$spacing-05`
Text-wrapper	padding-top, padding-bottom	12 / 0.75	`$spacing-04`
Icon	margin-right	16 / 1	`$spacing-05`

Structure and spacing for a callout | px / rem

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Color