Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Icon |
A static, decorative icon that matches the semantic variant of the Banner. |
|
|
|
2 |
Content |
The container that holds the Banner content. |
|
|
|
3 |
Title |
A concise sentence summarizing the main message. |
|
Yes |
|
4 |
Description |
Text providing essential context for the message. It may also include inline links. |
|
|
|
5 |
Action |
A call-to-action (typically a link) guiding users to resolve the notification’s trigger. |
Yes |
|
|
6 |
Close Button |
Button that allows users to dismiss the Banner manually. |
Yes |
Specifications and properties
Variants
The Banner comes in 4 semantic variants, each designed to reinforce the message's purpose. For more details on when and how to use each variant, 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 |