overlay

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Preview

A preview of the Alert Dialog component with interactive controls.

Preview Code

Interactive

Installation

Add the Alert Dialog component to your project.

Bash

ng g @ng-cn/core:c alert-dialog

Usage

Import and use the Alert Dialog component in your Angular application.

Template TypeScript

template.html

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Explore different variations and use cases for the Alert Dialog component.

Basic Confirmation

A simple confirmation dialog with cancel and action buttons.

Preview Code

Interactive

Destructive Action

Use destructive styling for dangerous actions like deletion.

Preview Code

Interactive

Controlled State

Control the dialog open state programmatically.

Preview Code

Interactive

With Async Action

Handle async operations with loading state.

Preview Code

Interactive

With Custom Content

Add custom content inside the dialog body.

Preview Code

Interactive

Animation States

Alert Dialog exposes data-state attributes for CSS animations.

Preview Code

Interactive

API Reference

AlertDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the dialog.
`defaultOpen`	`boolean`	`false`	The default open state when uncontrolled.

AlertDialogAction

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disable the action button.

AlertDialogContent

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes for the content.