Anatomy

Item |
Name |
Description |
Component |
Optional |
---|---|---|---|---|
1 |
Icon |
Static, decorative icon matching the semantic variant of the Banner. |
|
|
2 |
Content |
Container that holds the Banner content. |
|
|
3 |
Title |
A sentence summarizing the main message. |
|
Yes |
4 |
Description |
Text that provides the essential context for the main message. It may also include inline links. |
|
|
5 |
Link |
A call-to-action element that directs users to solve the notification’s trigger. |
Yes |
|
6 |
Close Button |
Allows users to manually dismiss the Banner. |
Yes |
Specifications and Properties
Variants
The Banner comes in 4 semantic variants to strengthen the message's purpose. To learn more about each variant’s purpose, please refer to the guidelines on the Usage tab.




Variant |
Background color token |
Icon |
---|---|---|
Info |
background.alert.info.secondary |
info |
Success |
background.alert.success.secondary |
done_circle |
Error |
background.alert.danger.secondary |
alert_circle |
Warning |
background.alert.warning.secondary |
problematic |
Spacing

Element |
Property |
Value |
Token |
---|---|---|---|
Banner |
Padding |
16px |
spacing.200 |
|
Gap |
12px |
spacing.150 |
Content |
Gap |
8px |
spacing.100 |
Text |
Gap |
4px |
spacing.50 |
Close button |
Padding top |
12px |
spacing.150 |
|
Padding right |
12px |
spacing.150 |
|
Padding left |
4px |
spacing.50 |