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>
</>
);
}
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>
</>
);
}
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>
</>
);
}
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>
</>
);
}
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>
);
}