Live example
Properties
|
Name |
Values |
Default |
|---|---|---|
|
variant |
'error' | 'info' | 'warning' | 'neutral' | 'red' | 'orange' | 'green' | 'blue' | 'success' |
'neutral' |
|
inverted |
boolean |
false |
|
customVariant |
{ backgroundColor: string, color: string } | undefined |
|
|
children |
ReactNode |
|
|
... |
JSX/IntrinsicElements["span"] |
|
Native Properties
|
Name |
Values |
Default |
|---|---|---|
|
variant |
'error' | 'info' | 'warning' | 'neutral' | 'red' | 'orange' | 'green' | 'blue' | 'success' |
'neutral' |
|
inverted |
boolean |
false |
|
customVariant |
{ |
|
|
children |
ReactNode |
|
|
… |
JSX/IntrinsicElements["view"] |
|
Composition
- Border
- Text
|
Tokens |
|
|---|---|
|
Text color - Neutral, info, success, warning, error |
color.alert.neutral color.alert.info color.alert.success color.alert.warning color.alert.error |
|
Background color - Neutral, info, success, warning, error |
color.alert.neutraltint color.alert.infotint color.alert.successtint color.alert.warningtint color.alert.errortint |
|
Border color |
color.alert.border |
|
Padding |
space.200 |
|
Text font weight |
font.family.bold |
|
Text font size |
font.size.md |
|
Text line height |
font.lineheight.md |
|
Border width |
border.width.md |
|
Border radius |
border.radius.lg |