Alert
Alert messages are meant to provide contextual feedback about important changes in the interface. They are used to convey essential information to the user, ensuring that critical updates or warnings are immediately noticeable.
| Component token | Element | Core token | Value |
|---|---|---|---|
errorBackgroundColor | Container (error) | color-red-100 | #ffe6e9 |
errorIconColor | Icon (error) | color-red-700 | #d0011b |
fontColor | Alert | color-grey-900 | #333333 |
infoBackgroundColor | Container (info) | color-blue-100 | #e6f4ff |
infoIconColor | Icon (info) | color-blue-700 | #0086e6 |
modalBackgroundColor | Container (modal) | color-white | #ffffff |
overlayColor | Overlay | color-grey-800-a | #000000b3 |
successBackgroundColor | Container (success) | color-green-100 | #eafaef |
successIconColor | Icon (success) | color-green-700 | #24a148 |
warningBackgroundColor | Container (warning) | color-yellow-100 | #fef9e6 |
warningIconColor | Icon (warning) | color-yellow-700 | #c59f07 |
| Component token | Element | Core token | Value |
|---|---|---|---|
fontFamily | Alert | font-family-sans | 'Open Sans', sans-serif |
fontSize | Alert | font-scale-02 | 0.875rem / 14px |
fontStyle | Alert | font-style-normal | normal |
fontWeight | Alert | font-weight-regular | 400 |
modalTitleFontSize | Title | font-scale-05 | 1.5rem / 24px |
modalTitleFontWeight | Title | font-weight-bold | 700 |