Get started on your web projects with our Tailwind CSS alert which provides contextual feedback messages for typical user actions.
An alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.
See below our simple alert example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.
import { Alert } from "@material-tailwind/react";
export default function Example() {
return <Alert>A simple alert for showing message.</Alert>;
}
The alert component comes with 2 different variants that you can change it using the variant
prop.
import { Alert } from "@material-tailwind/react";
export default function Variants() {
return (
<div className="flex flex-col gap-2">
<Alert variant="filled">A simple filled alert for showing message.</Alert>
<Alert variant="gradient">
A simple gradient alert for showing message.
</Alert>
</div>
);
}
The alert component comes with 19 different colors that you can change it using the color
prop, below there are some examples of the colors but you can check all of the them here.
import { Alert } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex flex-col gap-2 w-full">
<Alert color="blue">An info alert for showing message.</Alert>
<Alert color="red">An error alert for showing message.</Alert>
<Alert color="green">A success alert for showing message.</Alert>
<Alert color="amber">A warning alert for showing message.</Alert>
</div>
);
}
The alert component is a dismissible component that you can control it using the dismissible
and show
props.
import { useState, Fragment } from "react";
import { Alert } from "@material-tailwind/react";
export default function Colors() {
const [show, setShow] = useState(true);
return (
<Fragment>
{!show && (
<Button
variant="gradient"
className="absolute"
onClick={() => setShow(true)}
>
Show Alert
</Button>
)}
<Alert
show={show}
dismissible={{
onClose: () => setShow(false)
}}
>
A dismissible alert for showing message.
</Alert>
</Fragment>
);
}
The following props are available for the button component. These are the custom props that come with we've added for the alert component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
variant | Variant | Change alert variant | filled |
color | Color | Change alert color | blue |
dismissible | Dismissible | Makes the alert dismissible | undefined |
animate | Animate | Change alert animation | undefined |
show | boolean | Change the alert visibility | true |
icon | node | Add icon at the beginning of alert | undefined |
className | string | Add custom className for alert | '' |
children | node | Add content for alert | No default value its a required prop. |
type variant = "filled" | "gradient";
type color =
| "blue-grey"
| "grey"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";
type dismissible = {
action?: ReactNode;
onClose: () => void;
};
type animate = {
mount?: Object;
unmount?: Object;
};