Alerts

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.

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@chakra-ui/react"

Usage#

<DarkMode>
  <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>
</DarkMode>

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.

<DarkMode>
  <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 30th. Get ready!
    </Alert>
  </Stack>
</DarkMode>

Variant#

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

<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>

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:

<DarkMode>
  <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>
</DarkMode>

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

<DarkMode>
  <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>
</DarkMode>

Props#

Alert Props#

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

`colorScheme`

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

`size`

Description

Sizes for Alert are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`status`

Description

The status of the alert

Type

"info" | "warning" | "success" | "error"

`variant`

Type

"solid" | "subtle" | "left-accent" | "top-accent"

Default

"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.