Alert dialog
@xui/alert-dialogA modal confirmation for a consequential choice. It takes focus, blocks the page and asks for an explicit Confirm / Cancel. open is two-way bindable; confirmed / cancelled report the outcome.
Install
pnpm add @xui/alert-dialog Add the barrel to a standalone component's imports:
import { XuiAlertDialogImports } from '@xui/alert-dialog';
@Component({
imports: [XuiAlertDialogImports],
// …
})Examples
Destructive
Loading preview…
<div class="flex flex-col items-start gap-3">
<button xuiButton color="error" (click)="open.set(true)">Delete project</button>
<span class="text-foreground-muted text-sm">Last action: {{ last() }}</span>
</div>
<xui-alert-dialog
[(open)]="open"
destructive
title="Delete project?"
description="This permanently removes the project and all its data. This action cannot be undone."
confirmText="Delete"
(confirmed)="last.set('confirmed')"
(cancelled)="last.set('cancelled')"
/>Confirm
Loading preview…
<button xuiButton (click)="open.set(true)">Publish</button>
<xui-alert-dialog
[(open)]="open"
title="Publish this release?"
description="Subscribers will be notified immediately."
confirmText="Publish"
/>Blocking
Loading preview…
<button xuiButton (click)="open.set(true)">Review terms</button>
<xui-alert-dialog
[(open)]="open"
[dismissible]="false"
title="Accept updated terms"
description="You need to accept the new terms before continuing."
confirmText="Accept"
cancelText="Not now"
/>API
A modal confirmation dialog for a consequential choice — the kind you should stop and read. Unlike a plain dialog it takes focus, blocks the page and asks for an explicit Confirm / Cancel. open is two-way bindable; confirmed and cancelled report the outcome. Set destructive to tint the confirm button.
Variants
intentprimaryInputs
classClassValueThe user-defined classes on the panel. Merged last so they win.''openbooleanWhether the dialog is showing. Two-way bindable with [(open)].falsetitlestringThe question being asked. Rendered as the dialog's heading and used as its accessible name.''descriptionstringWhat confirming will do. Spell out anything irreversible here rather than in the title.''confirmTextstringLabel of the confirm button. Name the action ("Delete project") rather than saying "OK".'Confirm'cancelTextstringLabel of the cancel button, which holds the initial focus.'Cancel'destructivebooleanRender the confirm button in the error colour, for an action that destroys something.falsedismissiblebooleanAllow Escape and a backdrop click to dismiss (as a cancel).trueOutputs
confirmedvoidEmits when the confirm button is pressed. The dialog closes either way — this is where the action goes.cancelledvoidEmits when the dialog is dismissed without confirming.