Alert Dialog Component

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

Basic Usage

<uAlertDialog [(isOpen)]="isOpen" (action)="onAction($event)">
  <u-alert-dialog-header>
    <u-alert-dialog-title>Are you absolutely sure?</u-alert-dialog-title>
    <u-alert-dialog-description>
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </u-alert-dialog-description>
  </u-alert-dialog-header>
  <u-alert-dialog-footer>
    <uButton variant="outline" (click)="isOpen = false">Cancel</uButton>
    <uButton (click)="confirmDelete()">Continue</uButton>
  </u-alert-dialog-footer>
</uAlertDialog>

API Reference

uAlertDialog

Property	Type	Default	Description
`isOpen`	`boolean`	`false`	Whether the dialog is open
`closeOnOverlayClick`	`boolean`	`false`	Whether to close the dialog when clicking the overlay

Outputs

Event	Payload	Description
`isOpenChange`	`boolean`	Fired when the open state changes
`action`	`'confirm' \| 'cancel'`	Fired when a closing action is taken

Sub-components

u-alert-dialog-header: Wrapper for title and description
u-alert-dialog-title: The heading for the dialog
u-alert-dialog-description: The body text explaining the purpose
u-alert-dialog-footer: Wrapper for action buttons