Use our Tailwind CSS Alert built with Angular to notify users about important information or warnings in the website/application.
The Alert is a UI component used by web designers to provide feedback to the user. The feedback can be in the form of a warning, an error message, a success notification, or only informational. In terms of duration, some alerts disappear after a short set amount of time, while others remain until the user clicks to dismiss them.
Below we present you our Angular Alert example crafted with Tailwind CSS that will help you build enterprise-level applications with ease. Customize the component or add it directly to your project!
You first need to import the DUIAlert Module into your application module
Code
import { DUIAlert } from "david-ui-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, DUIAlert], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
Preview
Code
<dui-alert [open]="true"> A simple filled alert for showing message. </dui-alert>
Preview
Code
<div class="w-full flex flex-col gap-3"> <dui-alert [open]="true" variant="outlined"> A simple outlined alert for showing message. </dui-alert> <dui-alert [open]="true" variant="filled" > A simple filled alert for showing message. </dui-alert> <dui-alert [open]="true" variant="ghost" > A simple ghost alert for showing message. </dui-alert> <dui-alert [open]="true" variant="gradient" > A simple gradient alert for showing message. </dui-alert> </div>
Preview
Code
<dui-alert color="blue"> A simple filled alert for showing message.</dui-alert> <dui-alert color="red"> A simple filled alert for showing message.</dui-alert> <dui-alert color="yellow"> A simple filled alert for showing message.</dui-alert> <dui-alert color="green" > A simple filled alert for showing message.</dui-alert>
The Alert component is a dismissible component that you can control it using the IsDismissible and open property.
Preview
Code
<dui-alert [open]="open" [IsDismissible]="true" (onAlertClosed)="alertClosed($event)"> A simple filled alert for showing message. </dui-alert>
Preview
Code
<dui-alert [open]="open" [IsDismissible]="true" (onAlertClosed)="alertClosed($event)"> <dui-icon> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="{2}" stroke="currentColor" className="h-6 w-6" > <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg> </dui-icon> A simple filled alert for showing message. </dui-alert>
The following properties are available for dui-alert
Attribute | Type | Description | Default |
---|---|---|---|
variant | Variant | change alert variant | filled |
color | Color | change alert color | gray |
className | string | Add custom className for alert | '' |
open | boolean | Change alert visibility | true |
IsDismissible | boolean | Dismissible alert | false |
onAlertClosed | func | function when alert component is closed |
|