Alert message
Use Alert messages to capture vendors' attention in a prominent way and inform them of important information or status updates.
Color
| Element | Property | Color token |
|---|---|---|
| Title (Default) | Text | $color-text-default |
| Subtitle (Default) | Text | $color-text-default |
| Action (Branded) | Text | $color-action-primary |
| Container (Error) | Background | $color-status-danger-low |
| Container (Information) | Background | $color-status-information-low |
| Container (Success) | Background | $color-status-success-low |
| Container (Warning) | Background | $color-status-warning-low |
Size
Spacing
Typography
| Element | Weight Difference | Size & weight | Type token |
|---|---|---|---|
| Title | without subtitle | 16px, Medium | $typography-body-1 |
| Title | with subtitle | 16px, Bold | $typography-body-1 |
| Secondary text | - | 12px, Medium | $typography-caption |
| Action | - | 16px, Medium | $typography-body-1 |