Alert

Used to communicate a state that affects a system, feature or page.

This is the alert title

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

const Demo = () => {
  return (
    <Alert.Root status="info" title="This is the alert title">
      <Alert.Indicator />
      <Alert.Title>This is the alert title</Alert.Title>
    </Alert.Root>
  )
}

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.

Invalid Fields

Your form has some errors. Please fix them and try again.

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

const Demo = () => {
  return (
    <Alert.Root status="error">
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>Invalid Fields</Alert.Title>
        <Alert.Description>
          Your form has some errors. Please fix them and try again.
        </Alert.Description>
      </Alert.Content>
    </Alert.Root>
  )
}

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.

There was an error processing your request

Chakra is going live on August 30th. Get ready!

Seems your account is about expire, upgrade now

Data uploaded to the server. Fire on!

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

const Demo = () => {
  return (
    <Stack gap="4" width="full">
      <Alert.Root status="error">
        <Alert.Indicator />
        <Alert.Title>There was an error processing your request</Alert.Title>
      </Alert.Root>

      <Alert.Root status="info">
        <Alert.Indicator />
        <Alert.Title>
          Chakra is going live on August 30th. Get ready!
        </Alert.Title>
      </Alert.Root>

      <Alert.Root status="warning">
        <Alert.Indicator />
        <Alert.Title>
          Seems your account is about expire, upgrade now
        </Alert.Title>
      </Alert.Root>

      <Alert.Root status="success">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>
    </Stack>
  )
}

Variants

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

Data uploaded to the server. Fire on!

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

const Demo = () => {
  return (
    <Stack gap="4">
      <Alert.Root status="success" variant="subtle">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>

      <Alert.Root status="success" variant="solid">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>

      <Alert.Root status="success" variant="surface">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>
    </Stack>
  )
}

With Close Button

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

Success!

Your application has been received. We will review your application and respond within the next 48 hours.

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

const Demo = () => {
  return (
    <Alert.Root>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>Success!</Alert.Title>
        <Alert.Description>
          Your application has been received. We will review your application
          and respond within the next 48 hours.
        </Alert.Description>
      </Alert.Content>
      <CloseButton pos="relative" top="-2" insetEnd="-2" />
    </Alert.Root>
  )
}

With Spinner

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

We are loading something

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

const Demo = () => {
  return (
    <Alert.Root
      borderStartWidth="3px"
      borderStartColor="colorPalette.600"
      title="We are loading something"
    >
      <Alert.Indicator>
        <Spinner size="sm" />
      </Alert.Indicator>
      <Alert.Title>We are loading something</Alert.Title>
    </Alert.Root>
  )
}

Custom Icon

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

Submitting this form will delete your account

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

const Demo = () => {
  return (
    <Alert.Root status="warning">
      <Alert.Indicator>
        <LuAlarmClockPlus />
      </Alert.Indicator>
      <Alert.Title>Submitting this form will delete your account</Alert.Title>
    </Alert.Root>
  )
}

Color Palette Override

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

This is an info alert but shown as teal

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

const Demo = () => {
  return (
    <Alert.Root status="info" colorPalette="teal">
      <Alert.Indicator />
      <Alert.Title>This is an info alert but shown as teal</Alert.Title>
    </Alert.Root>
  )
}

Customization

You can style the Alert component using style props.

Black Friday Sale (20% off)

Upgrade your plan to get access to the sale.

Upgrade

Heads up: Black Friday Sale (20% off)

import { Alert, Link, Stack } from "@chakra-ui/react"
import { LuPercent } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="4">
      <Alert.Root title="Success" status="success">
        <Alert.Indicator>
          <LuPercent />
        </Alert.Indicator>
        <Alert.Content color="fg">
          <Alert.Title>Black Friday Sale (20% off)</Alert.Title>
          <Alert.Description>
            Upgrade your plan to get access to the sale.
          </Alert.Description>
        </Alert.Content>
        <Link alignSelf="center" fontWeight="medium">
          Upgrade
        </Link>
      </Alert.Root>

      <Alert.Root
        size="sm"
        borderStartWidth="3px"
        borderStartColor="colorPalette.solid"
        alignItems="center"
        title="Success"
        status="success"
      >
        <LuPercent />
        <Alert.Title textStyle="sm">
          Heads up: Black Friday Sale (20% off)
        </Alert.Title>
      </Alert.Root>
    </Stack>
  )
}

Closed Component

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

import { Alert as ChakraAlert } from "@chakra-ui/react"
import * as React from "react"

export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
  startElement?: React.ReactNode
  endElement?: React.ReactNode
  title?: React.ReactNode
  icon?: React.ReactElement
}

export const AlertClosedComponent = React.forwardRef<
  HTMLDivElement,
  AlertProps
>(function Alert(props, ref) {
  const { title, children, icon, startElement, endElement, ...rest } = props
  return (
    <ChakraAlert.Root ref={ref} {...rest}>
      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
      {children ? (
        <ChakraAlert.Content>
          <ChakraAlert.Title>{title}</ChakraAlert.Title>
          <ChakraAlert.Description>{children}</ChakraAlert.Description>
        </ChakraAlert.Content>
      ) : (
        <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
      )}
      {endElement}
    </ChakraAlert.Root>
  )
})

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

npx @chakra-ui/cli snippet add alert

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`status`	`'info'`	`'info' \| 'warning' \| 'success' \| 'error' \| 'neutral'` The status of the component
`variant`	`'subtle'`	`'subtle' \| 'surface' \| 'outline' \| 'solid'` The variant of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`inline`		`'true' \| 'false'` The inline of the component

Action Bar

Avatar