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 {
} from "@chakra-ui/react"


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.

Editable Example


Alert has 4 variant styles you can use. Pass the variant prop and use either subtle, solid, left-accent or top-accent.

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:

Editable Example

Alert can also incorporate other Chakra components. Here's an example of an alert with wrapping description text:

Editable Example


Alert Props#

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

colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"
sizestringSizes for Alert are not implemented in the default theme. You can extend the theme to implement them.-
status"info" | "warning" | "success" | "error"The status of the alert-
variant"solid" | "subtle" | "left-accent" | "top-accent""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.