role alert
Alert draft v0.1.0
A brief, important message that draws attention without interrupting the task.
An alert tells people something important about the page or what they just did: a saved change, a failed payment, a maintenance window, a quota about to run out. It sits in the content, tinted by its intent with an icon and a title, and is announced by assistive technology when it appears. It never moves focus and never blocks the page: a message that needs a decision is a dialog, a short transient confirmation is a toast.
Tokens
From packages/tokens/src/components/alert.tokens.json. Path grammar: alert.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (12)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.container.background.info
|
color |
{global.bg.subtle.functional.info.default}
|
light
#EDF1F9
dark
#09162F
|
--alert-container-background-info
|
alert.container.background.success
|
color |
{global.bg.subtle.functional.success.default}
|
light
#DBFAE6
dark
#011C16
|
--alert-container-background-success
|
alert.container.background.warning
|
color |
{global.bg.subtle.functional.warning.default}
|
light
#FFF1C7
dark
#1F1504
|
--alert-container-background-warning
|
alert.container.background.error
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--alert-container-background-error
|
alert.container.border-color.info
|
color |
{global.border.accent.functional.info.default}
|
light
#1A4CAD
dark
#709DF1
|
--alert-container-border-color-info
|
alert.container.border-color.success
|
color |
{global.border.accent.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--alert-container-border-color-success
|
alert.container.border-color.warning
|
color |
{global.border.accent.functional.warning.default}
|
#DFA700
|
--alert-container-border-color-warning
|
alert.container.border-color.error
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--alert-container-border-color-error
|
alert.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--alert-container-border-width
|
alert.container.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--alert-container-border-radius
|
alert.container.padding
|
dimension |
{space.16}
|
16px
|
--alert-container-padding
|
alert.container.gap
Between the icon and the content column.
|
dimension |
{space.12}
|
12px
|
--alert-container-gap
|
Part icon (10)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.icon.color.info
|
color |
{global.icon.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--alert-icon-color-info
|
alert.icon.color.success
|
color |
{global.icon.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--alert-icon-color-success
|
alert.icon.color.warning
|
color |
{global.icon.on-subtle.functional.warning.default}
|
light
#3E2D0C
dark
#DFA700
|
--alert-icon-color-warning
|
alert.icon.color.error
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--alert-icon-color-error
|
alert.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--alert-icon-font-family
|
alert.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--alert-icon-font-weight
|
alert.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--alert-icon-fill
|
alert.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--alert-icon-grade
|
alert.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--alert-icon-optical-size
|
alert.icon.size
|
dimension |
{size.4}
|
24px
|
--alert-icon-size
|
Part content (1)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.content.gap
Between the title and the message.
|
dimension |
{space.4}
|
4px
|
--alert-content-gap
|
Part title (5)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.title.color.info
|
color |
{global.text.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--alert-title-color-info
|
alert.title.color.success
|
color |
{global.text.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--alert-title-color-success
|
alert.title.color.warning
|
color |
{global.text.on-subtle.functional.warning.default}
|
light
#644B16
dark
#FFD654
|
--alert-title-color-warning
|
alert.title.color.error
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--alert-title-color-error
|
alert.title.typography
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--alert-title-typography-font-family--alert-title-typography-font-size--alert-title-typography-font-weight--alert-title-typography-line-height--alert-title-typography-letter-spacing
|
Part message (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.message.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--alert-message-color
|
alert.message.typography
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--alert-message-typography-font-family--alert-message-typography-font-size--alert-message-typography-font-weight--alert-message-typography-line-height--alert-message-typography-letter-spacing
|