Skip to Content
Sponsor

Alert

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

Import#

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.

Usage#

Editable Example

Status#

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

Variant#

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

Editable Example

Composition#

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

Props#

Alert Props#

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

NameTypeDescriptionDefault
colorSchemestring-
cssInterpolation<{}>The emotion's css style object-
orientation"horizontal" | "vertical"-
sizestring-
status"info" | "warning" | "success" | "error"The status of the alert-
styleConfigRecord<string, any>-
variantstring-

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