Live example
Properties
|
Name |
Values |
Default |
|---|---|---|
|
id (required) |
string |
|
|
title (required) |
ReactNode |
|
|
dismissible |
boolean |
|
|
variant |
'info' | 'warning' | 'error' | 'success' |
'info' |
|
onDismiss |
() => void |
|
|
ariaLive |
'assertive' | 'polite' |
'polite' |
|
... |
JSX.IntrinsicElements["div"] |
|
Native Properties
|
Name |
Values |
Default |
|---|---|---|
|
variant |
NotificationVariantName |
'info' |
|
title (required) |
string |
|
|
noMargin |
boolean |
false |
|
dismissible |
boolean |
false |
|
onDismiss |
Function |
|
|
children |
ReactNode |
|
|
… |
React.RefAttributes<View> |
|
Composition
- Heading text
- Dismiss icon
- Additional text
- Border
|
Tokens |
|
|---|---|
|
Text and border colour - Info, success, warning, error |
color.alert.info color.alert.success color.alert.warning color.alert.error |
|
Heading background colour - Info, success, warning, error |
color.alert.infotint color.alert.successtint color.alert.warningtint color.alert.errortint |
|
Additional text colour |
color.surface.onsurface |
|
Additional text background colour |
color.surface.bright |
|
Dismiss icon colour |
color.button.surface.fg |
|
Dismiss button colour |
color.button.surface.bg |
|
Heading text font weight |
font.family.bold |
|
Text font weight |
font.family.book |
|
Text line height |
font.lineheight.md |
|
Border width |
border.width.sm |
|
Border radius |
border.radius.lg |
|
Padding |
space-200 space-300 space-400 |