Alert

Alerts are used to communicate a state that affects a system, feature or page.

Theme source

Props#

Alert Props#

Alert is the wrapper for Alert component. It composes the Flex component.

`addRole`

Type

boolean

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

blue

`size`

Description

The size of the Alert

Type

string

`status`

Description

The status of the alert

Type

"info" | "warning" | "success" | "error" | "loading"

Default

info

`variant`

Description

The variant of the Alert

Type

"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.

Edit this page on GitHub