Alert

Alert is used to communicate a state that affects a system, feature or page.

View sourceView theme source@chakra-ui/alert

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

<Alert status='error'> <AlertIcon /> <AlertTitle>Your browser is outdated!</AlertTitle> <AlertDescription>Your Chakra experience may be degraded.</AlertDescription> </Alert>

<Alert status='error'>
  <AlertIcon />
  <AlertTitle>Your browser is outdated!</AlertTitle>
  <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
</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.

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

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

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>

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

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

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

Alert can also incorporate other Chakra components. Here's an example of an alert with wrapping description text and the CloseButton component with simple close functionality:

function CompExample() { const { isOpen: isVisible, onClose, onOpen, } = useDisclosure({ defaultIsOpen: true }); return isVisible ? ( <Alert status='success'> <AlertIcon /> <Box> <AlertTitle>Success!</AlertTitle> <AlertDescription> Your application has been received. We will review your application and respond within the next 48 hours. </AlertDescription> </Box> <CloseButton alignSelf='flex-start' position='relative' right={-1} top={-1} onClick={onClose} /> </Alert> ) : ( <Button onClick={onOpen}>Show Alert</Button> ); }

function CompExample() {
  const {
    isOpen: isVisible,
    onClose,
    onOpen,
  } = useDisclosure({ defaultIsOpen: true });

  return isVisible ? (
    <Alert status='success'>
      <AlertIcon />
      <Box>
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>
          Your application has been received. We will review your application
          and respond within the next 48 hours.
        </AlertDescription>
      </Box>
      <CloseButton
        alignSelf='flex-start'
        position='relative'
        right={-1}
        top={-1}
        onClick={onClose}
      />
    </Alert>
  ) : (
    <Button onClick={onOpen}>Show Alert</Button>
  );
}

Props

Alert Props

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

addRole

Type

boolean

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

Default

"info"

variant

Type

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

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.