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.
Below we are presenting examples of alerts that you can use in your Tailwind CSS project. The examples come in different colors and styles so you can adapt them easily to your needs.
The alert component comes with 2 different variants that you can change it using the gradient classes.
The alert component comes with 19 different colors that you can change it using the color classes, below there are some examples of the colors but you can check all of the them.
You can add an icon at the beginning of alert component using the
You can make an alert dismissible by adding the
data-dismissible="alertName" data attribute to the alert element and the
data-dismissible-target="alertName" data attribute to the element that you want to close the alert with.
You can use any DOM element as the alert closing icon.
Use the example below to use alert component with more content like title and description.
I don't know what that word means. I'm happy. But success, that goes back to what in somebody's eyes success means. For me, success is inner peace. That's a good day htmlFor me.
The following data attributes are available for alert element.
|Set the alert dismissible name, it should be the same as the |
The following data attributes are available for alert trigger element (The element that you want to close the alert with).
|Hide the alert element that has the same value of |
data attribute for it's
The alert component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules --> <script src="node_modules/@material-tailwind/html@latest/scripts/dismissible.js"></script> <!-- from cdn --> <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/dismissible.js"></script>