Alert Alerts are used to communicate a state that affects a system, feature or page.
Chakra UI exports 4 alert related components.
Alert: The wrapper for alert components.AlertIcon: The visual icon for the alert that changes based on the status
prop.AlertTitle: The title of the alert to be announced by screen readers.AlertDescription: The description of the alert to be announced by screen
readers.import {
Alert ,
AlertIcon ,
AlertTitle ,
AlertDescription ,
} from "@chakra-ui/react"
Your browser is outdated!
Your Chakra experience may be degraded.
< Alert status = " error " >
< AlertIcon />
< AlertTitle mr = { 2 } > Your browser is outdated ! </ AlertTitle >
< AlertDescription > Your Chakra experience may be degraded . </ AlertDescription >
< CloseButton position = " absolute " right = " 8px " top = " 8px " />
</ Alert >
copy Editable Example
Change the status of the alerts by passing the status prop. This affects the
color scheme and icon used. Alert supports error, success, warning, and
info statuses.
There was an error processing your request
Data uploaded to the server. Fire on!
Seems your account is about expire, upgrade now
Chakra is going live on August 30th. Get ready!
< Stack spacing = { 3 } >
< Alert status = " error " >
< AlertIcon />
There was an error processing your request
</ Alert >
< Alert status = " success " >
< AlertIcon />
Data uploaded to the server . Fire on !
</ Alert >
< Alert status = " warning " >
< AlertIcon />
Seems your account is about expire , upgrade now
</ Alert >
< Alert status = " info " >
< AlertIcon />
Chakra is going live on August 30 th . Get ready !
</ Alert >
</ Stack >
copy Editable Example
Alert has 4 variant styles you can use. Pass the variant prop and use either
subtle, solid, left-accent or top-accent.
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
< Stack spacing = { 3 } >
< Alert status = " success " variant = " subtle " >
< AlertIcon />
Data uploaded to the server . Fire on !
</ Alert >
< Alert status = " success " variant = " solid " >
< AlertIcon />
Data uploaded to the server . Fire on !
</ Alert >
< Alert status = " success " variant = " left-accent " >
< AlertIcon />
Data uploaded to the server . Fire on !
</ Alert >
< Alert status = " success " variant = " top-accent " >
< AlertIcon />
Data uploaded to the server . Fire on !
</ Alert >
</ Stack >
copy Editable Example
Alert ships with smaller components to allow for flexibility in creating all
kinds of layouts. Here's an example of a custom alert style and layout:
Application submitted!
Thanks for submitting your application. Our team will get back to you soon.
< Alert
status = " success "
variant = " subtle "
flexDirection = " column "
alignItems = " center "
justifyContent = " center "
textAlign = " center "
height = " 200px "
>
< AlertIcon boxSize = " 40px " mr = { 0 } />
< AlertTitle mt = { 4 } mb = { 1 } fontSize = " lg " >
Application submitted !
</ AlertTitle >
< AlertDescription maxWidth = " sm " >
Thanks for submitting your application . Our team will get back to you soon .
</ AlertDescription >
</ Alert >
copy Editable Example
Alert can also incorporate other Chakra components. Here's an example of an
alert with wrapping description text:
Success!
Your application has been received. We will review your application and respond within the next 48 hours.
< Alert status = " success " >
< AlertIcon />
< Box flex = " 1 " >
< AlertTitle > Success ! </ AlertTitle >
< AlertDescription display = " block " >
Your application has been received . We will review your application and
respond within the next 48 hours .
</ AlertDescription >
</ Box >
< CloseButton position = " absolute " right = " 8px " top = " 8px " />
</ Alert >
copy Editable Example
Alert is the wrapper for Alert component. It composes the Flex component.
Name Type Description Default colorScheme string- orientation "horizontal" | "vertical"- size string- status "info" | "warning" | "success" | "error"The status of the alert - styleConfig Record<string, any>- variant string-
AlertIcon composes Icon and changes the icon based on the status prop.
AlertTitle composes the Box component.
AlertDescription composes the Box component.