Alert

Usage

import { Alert } from "@chakra-ui/react"

<Alert.Root>
  <Alert.Indicator />
  <Alert.Content>
    <Alert.Title />
    <Alert.Description />
  </Alert.Content>
</Alert.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Description

Render the Alert.Description component to provide additional context to the alert.

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.

Variants

Use the variant prop to change the visual style of the alert. Values can be either subtle, solid, outline, surface

With Close Button

Here's and example of how to compose the Alert with a close button.

With Spinner

Here's and example of how to compose the Alert with a spinner.

Custom Icon

Use the icon prop to pass a custom icon to the alert. This will override the default icon for the alert status.

Color Palette Override

The default colorPalette is inferred from the status prop. To override the color palette, pass the colorPalette prop.

Customization

You can style the Alert component using style props.

Closed Component

Here's how to setup the Alert for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add alert

Props

Root

Explorer

Explore the Alert component parts interactively. Click on parts in the sidebar to highlight them in the preview.