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.

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

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

Usage#

Your browser is outdated!

Your Chakra experience may be degraded.

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

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

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.

There was an error processing your request

Data uploaded to the server. Fire on!

Seems your account is about to expire, upgrade now!

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

<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 to expire, upgrade now!
  </Alert>

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

<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 to expire, upgrade now!
  </Alert>
  <Alert status="info">
    <AlertIcon />
    Chakra is going live on August 30th. Get ready!
  </Alert>
</Stack>

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.

Data uploaded to the server. Fire on!

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

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

Editable Example

Composition#

Alert ships with smaller component to allow for flexibility and make it easy to create all kinds of layout. Here's an example of custom alert style and layout.

Application submitted!

Thanks for submitting your application. Our team will get back to you soon.

<Alert
  status="success"
  variant="subtle"
  flexDirection="column"
  justifyContent="center"
  textAlign="center"
  height="200px"
>
  <AlertIcon size="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>

<Alert
  status="success"
  variant="subtle"
  flexDirection="column"
  justifyContent="center"
  textAlign="center"
  height="200px"
>
  <AlertIcon size="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>

Editable Example

Props#

Alert Props#

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

Name	Type	Default	Description
status	`error`, `success`, `warning`, `info`	`info`	The status of the alert
variant	`subtle`, `solid`, `left-accent`, `top-accent`	`subtle`	The variant of the alert style to use.

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.

Proudly made in 🇳🇬

Released under the MIT License.

Alert

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Status#

Variant#

Composition#

Props#

Alert Props#

AlertIcon Props#

AlertTitle Props#

AlertDescription Props#

Import#