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.

addRole

Type
boolean
Default
false

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"
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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel