Tailwind CSS Alerts
David UI’s alert component is ideal for displaying messages like success, error, or warnings.
Built with Tailwind CSS and HTML, it ensures accessibility and supports various styles and colors. Its responsive design fits seamlessly into any interface.
Check out David UI's alert examples to add impactful notifications to your Tailwind CSS applications.
Basic Alert
This example showcases an alert with white text on a dark gray background, offering strong contrast for improved readability.
Alert Variants
This set showcases four alert variants: Ghost (subtle, semi-transparent background), Outline (transparent with a defined border), Solid (bold, solid background), and Gradient (vibrant gradient effect). Each variant is visually distinct, responsive, and adaptable to various UI needs.
Alert Colors
Choose from 19 color options for the Alert component by applying specific color classes. The example below showcases a selection of available colors.
Alert Icon
Optimize your Tailwind CSS alert with an icon at the beginning by incorporating the i tag for a visually enriched component.
Alert with List
The Alert component supports a variety of embedded elements. The example below illustrates an alert containing a list.
Ensure that these requirements are met:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
Ensure that these requirements are met:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
Ensure that these requirements are met:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
Ensure that these requirements are met:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
Alert Dismissible
This example includes a dismiss button on the right with an intuitive "close" icon, allowing users to easily remove the alert.
Alert Custom Close Icon
Replace the default close icon with any DOM element to customize the appearance of the Alert component's dismiss feature.
Alert with Content
Combine elements such as titles and descriptions within the Alert component to create more comprehensive and informative alerts.
Success
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 for me.
Alert Custom Styles
Here is an example of how you can implement unique styles for the Alert component.
Required Script
The Alert component in david-ai is only dependent on JavaScript if you are using dismissible alerts. This means if your alert includes a dismiss button with data-dui-dismiss="alert", the library's JavaScript is required to enable the functionality for closing the alert.
Installation
To use the Alert component in your project, you first need to install the david-ai library via npm:
Basic Usage
Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initAlert:
Using with CDN
You can include david-ai via a CDN and initialize alerts globally in the browser. Add the following script to your HTML file:
