Anatomy
![Anatomy Image](/img/components/notification-banner/notification-banner-anatomy.webp)
- 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
![Notification Banner with Prefix Slot](/img/components/notification-banner/notification-banner-left-slot-variant.webp)
Attribute | Token | Value |
---|---|---|
Prefix Slot | ||
Margin (Right) | notification-banner-prefix-margin-right | |
Dimension | notification-banner-prefix-dimension |
Status Symbol
![Critical Notification Banner](/img/components/notification-banner/notification-banner-critical-status-variant.webp)
![Caution Notification Banner](/img/components/notification-banner/notification-banner-caution-status-variant.webp)
![Serious Notification Banner](/img/components/notification-banner/notification-banner-serious-status-variant.webp)
![Normal Notification Banner](/img/components/notification-banner/notification-banner-normal-status-variant.webp)
![Standby Notification Banner](/img/components/notification-banner/notification-banner-standby-status-variant.webp)
![Off Notification Banner](/img/components/notification-banner/notification-banner-off-status-variant.webp)
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
![Large Notification Banner](/img/components/notification-banner/notification-banner-large-size.webp)
![Small Notification Banner](/img/components/notification-banner/notification-banner-small-size.webp)
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 |