Tailwind CSS Alert with Angular

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

    
import { DUIAlert } from "david-ui-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, DUIAlert],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

Primary Alert

A simple filled alert for showing message.
    
<dui-alert [open]="true">
A simple filled alert for showing message.
</dui-alert>

Alert Variants

Alert component has different which you use by configuring variant property.

A simple outlined alert for showing message.
A simple filled alert for showing message.
A simple ghost alert for showing message.
A simple gradient alert for showing message.
    
<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>

Alert Colors

A simple filled alert for showing message.
A simple filled alert for showing message.
A simple filled alert for showing message.
A simple filled alert for showing message.
    
<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>

Dismissible Alert

The Alert component is a dismissible component that you can control it using the IsDismissible and open property.

    
<dui-alert
[open]="open"
[IsDismissible]="true"
(onAlertClosed)="alertClosed($event)">
A simple filled alert for showing message.
</dui-alert>

Alert Icon

You can use custom Icon for showing alert component.

    
<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>

Alert Properties

The following properties are available for dui-alert component. These are the custom properties that we've added for the alert component and you can use all the other native properties as well.

AttributeType Description Default
variantVariantchange alert variantfilled
colorColorchange alert colorgray
classNamestringAdd custom className for alert''
openbooleanChange alert visibilitytrue
IsDismissiblebooleanDismissible alertfalse
onAlertClosedfuncfunction when alert component is closed

Type - Variant

    
type variant = "filled" | "gradient" | "outlined" | "ghost";

Type - Color

    
type colors =
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";