Anatomy

- Prefix Slot (Optional)
- Status Symbol (Optional)
- Text
- Link (Optional)
- Action Slot (Optional)
- Outer Container
- Inner Container
Default Layout
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Padding (Top and Bottom) | notification-banner-padding-y-large | |
Padding | notification-banner-padding-right | |
Padding | notification-banner-padding-left | |
Border Color | notification-banner-color-border-inner-default | |
Border Color | notification-banner-color-border-outer-default | |
Border Radius | notification-banner-radius-outer | |
Container (inner) | ||
Border Radius | notification-banner-radius-inner | |
Background Color | notification-banner-color-background | |
Text | ||
Font Family | font-heading-5-font-family | |
Font Size | font-heading-5-font-size | |
Font Weight | font-heading-5-font-weight | |
Line Height | font-heading-5-line-height | |
Letter Spacing | font-heading-5-letter-spacing | |
Text Color | notification-banner-color-text | |
Status Symbol | ||
Margin (Right) | notification-banner-status-symbol-margin-right | |
Link | ||
Font Family | font-heading-5-font-family | |
Font Size | font-heading-5-font-size | |
Font Weight | font-heading-5-font-weight | |
Line Height | font-heading-5-line-height | |
Letter Spacing | font-heading-5-letter-spacing | |
Close icon | ||
Text Color | color-text-interactive-default |
Variants
Left Slot

Attribute | Token | Value |
---|---|---|
Prefix Slot | ||
Margin (Right) | notification-banner-prefix-margin-right | |
Dimension | notification-banner-prefix-dimension |
Status Symbol






Normal
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-normal | |
Border Color | notification-banner-color-border-outer-normal |
Caution
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-caution | |
Border Color | notification-banner-color-border-outer-caution |
Serious
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-serious | |
Border Color | notification-banner-color-border-outer-serious |
Critical
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-critical | |
Border Color | notification-banner-color-border-outer-critical |
Standby
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-standby | |
Border Color | notification-banner-color-border-outer-standby |
Off
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-off | |
Border Color | notification-banner-color-border-outer-off |
Default
Attribute | Token | Value |
---|---|---|
Container (outer) | ||
Border Color | notification-banner-color-border-inner-default | |
Border Color | notification-banner-color-border-outer-default |
Sizes


Small
Attribute | Token | Value |
---|---|---|
Container (Inner) | ||
Padding (Top and Bottom) | notification-banner-padding-y-small |
Large
Attribute | Token | Value |
---|---|---|
Container (Inner) | ||
Padding (Top and Bottom) | notification-banner-padding-y-large |