ConfirmDialog

New

A moment to make sure. Ask for confirmation before taking an important action.

Service drivenCustom templatesKeyboard accessible

Basic

Use one dialog for multiple actions. Each request supplies its own message, labels and callbacks.

Design workspace

Your next great idea, ready for its next step.

Choose an action to open a confirmation.

Position

Open a confirmation in the center, along an edge or in a corner of the viewport.

Template

Customize the message while keeping the standard header and actions.

Headless

Design the entire content with a headless template. Use the provided callbacks for your actions.

Usage and API

Import AvConfirmDialog and provide AvConfirmationService on your page. Call confirm() to open the dialog; use matching keys when a page contains several dialogs.

TypeScript

import { AvConfirmDialog, AvConfirmationService } from 'avero-ui';

// Add AvConfirmDialog to imports and AvConfirmationService to providers.
private readonly confirmations = inject(AvConfirmationService);

save(event: Event) {
  this.confirmations.confirm({
    target: event.currentTarget as HTMLElement,
    header: 'Save changes?',
    message: 'Your changes will be saved to this workspace.',
    acceptLabel: 'Save',
    accept: () => this.saveChanges(),
  });
}

HTML

<av-confirm-dialog />
<button avButton (click)="save($event)">Save changes</button>

Templates

<av-confirm-dialog key="custom">
  <ng-template #message let-confirmation>
    <p>{{ confirmation.message }}</p>
  </ng-template>
</av-confirm-dialog>

<av-confirm-dialog key="headless">
  <ng-template #headless let-confirmation
    let-onAccept="onAccept" let-onReject="onReject">
    <h2>{{ confirmation.header }}</h2>
    <p>{{ confirmation.message }}</p>
    <button avButton (click)="onAccept()">Confirm</button>
    <button avButton variant="secondary" (click)="onReject()">Cancel</button>
  </ng-template>
</av-confirm-dialog>

Options. Requests support header, message, icon (text), position, acceptLabel, rejectLabel, severity, target, accept and reject. Inputs include key, inputId, header, position, acceptLabel, rejectLabel, closable, closeOnEscape and dismissableMask (false by default). onHide emits accept, reject, dismiss or close. service.close(key) closes without invoking action callbacks.

Templates. Direct child #header, #message, #footer and #headless templates receive the confirmation as their implicit value. Footer and headless templates also receive onAccept and onReject callbacks.

Accessibility. A native modal dialog keeps keyboard focus inside and makes the background inert. Cancel receives initial focus; Escape dismisses and focus returns to the trigger. Headless templates can use data-default-focus on their preferred control. Supply a descriptive header and a unique inputId for each dialog.

Styling. Customize --av-confirm-dialog-width, --av-confirm-dialog-padding, --av-confirm-dialog-radius, --av-confirm-dialog-background, --av-confirm-dialog-color, --av-confirm-dialog-border and --av-confirm-dialog-mask.