Alert

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

    SourceTheme source@chakra-ui/alert

Props#

Alert Props#

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

colorScheme

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

size

Description

Sizes for Alert are not implemented in the default theme. You can extend the theme to implement them.

Type
string

status

Description

The status of the alert

Type
"info" | "warning" | "success" | "error" | "loading"
Default
"info"

variant

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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel