react chakra ui alert message example

React Chakra UI Alert Message Example

updated 23/01/23 By frontendshape

In this tutorial, we will create alert message using Chakra UI and React. We will create alert message component with status, chakra ui show and hide alert message example with react Chakra UI.

Install & Setup Vite + React + Typescript + Chakra UI

How to Use Chakra UI in Next.JS 13


React Chakra UI Alert Message Example

1. react chakra ui alert message component with Alert, AlertIcon, AlertTitle, AlertDescription.

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

export default function AlertMessage() {
  return (
    <>
      <Alert status="error">
        <AlertIcon />
        <AlertTitle>Your browser is outdated!</AlertTitle>
        <AlertDescription>
          Your Chakra experience may be degraded.
        </AlertDescription>
      </Alert>
    </>
  );
}
react chakra ui alert message component

react chakra ui alert message component

2. react chakra ui alert message component with status error, success, warning, info.

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

export default function AlertMessage() {
  return (
    <>
      <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>
    </>
  );
}
react chakra ui alert status error, success, warning, info

react chakra ui alert status error, success, warning, info

3. react chakra ui alert message component variant with subtle, solid, left-accent or top-accent.

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

export default function AlertMessage() {
  return (
    <>
      <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>
    </>
  );
}
chakra ui alert variant with subtle, solid, left-accent or top-accent

chakra ui alert variant with subtle, solid, left-accent or top-accent

4. react chakra ui thank you alert message.

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

export default function AlertMessage() {
  return (
    <>
      <Alert
        status="success"
        variant="subtle"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        textAlign="center"
        height="200px"
        maxW="600px"
      >
        <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>
    </>
  );
}
chakra ui thank you alert message

chakra ui thank you alert message

5. react chakra ui show and hide alert message when click on button.

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
  Box,
  Button,
  CloseButton,
  useDisclosure,
} from "@chakra-ui/react";

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

  return isVisible ? (
    <Alert status="success" maxW="720">
      <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>
  );
}
chakra ui show and hide alert message

chakra ui show and hide alert message