"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Alert
Alerts are used to communicate a state that affects a system, feature or page.
Props#
Alert Props#
Alert is the wrapper for Alert component. It composes the Flex component.
colorScheme
colorSchemeType
Default
"blue"size
sizeDescription
Sizes for Alert are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstatus
statusDescription
The status of the alert
Type
"info" | "warning" | "success" | "error" | "loading"Default
"info"variant
variantType
"subtle" | "left-accent" | "top-accent" | "solid"Default
"subtle"AlertIcon Props#
AlertIcon composes Icon and changes the icon based on the status prop.
AlertTitle Props#
AlertTitle composes the Box component.
AlertDescription Props#
AlertDescription composes the Box component.
Props#
Alert Props#
Alert is the wrapper for Alert component. It composes the Flex component.
colorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"size
sizeDescription
Sizes for Alert are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstatus
statusDescription
The status of the alert
Type
"info" | "warning" | "success" | "error" | "loading"Default
"info"variant
variantType
"subtle" | "left-accent" | "top-accent" | "solid"Default
"subtle"AlertIcon Props#
AlertIcon composes Icon and changes the icon based on the status prop.
AlertTitle Props#
AlertTitle composes the Box component.
AlertDescription Props#
AlertDescription composes the Box component.