overlay

Alert

Displays a callout for user attention with customizable variants.

Preview

A preview of the Alert component with interactive controls.

Preview Code

Interactive

Installation

Add the Alert component to your project.

Bash

ng g @ng-cn/core:c alert

Usage

Import and use the Alert component in your Angular application.

Template TypeScript

template.html

<Alert>
  <lucide-icon name="terminal" class="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Explore different variations and use cases for the Alert component.

Default

A default alert with an icon and descriptive text.

Preview Code

Interactive

Destructive

Use the destructive variant for error messages or warnings.

Preview Code

Interactive

With Custom Icon

Alerts can include any Lucide icon to match the context.

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	The visual style of the alert.
`class`	`string`	—	Additional CSS classes to apply.