Alert

Displays a callout for user attention.

PreviousNext
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address
Loading...

Installation

1

Run the CLI

Use the CLI to add the component to your project. 

npx @ngzard/ui add alert
1

Add the component files

Create the component directory structure and add the following files to your project.

Loading...

Examples

basic

Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address
Loading...

API Reference

z-alert Component

Property Description Type Default
[zTitle] Alert title string | TemplateRef<void> -
[zDescription] Alert description string | TemplateRef<void> -
[zIcon] Alert icon string | TemplateRef<void> -
[zType] Alert variant default | destructive default