ConfirmPopup

New

A small pause, right where you need it. Confirm an action beside the control that started it.

Anchored overlayShared serviceCustom templates

Basic

Pass the clicked button as the target. The popup follows its position and flips above it when space below is limited.

Design workspace

All your ideas, in one place.

Draft

READY FOR THE NEXT STEP

Good work deserves a second look.

Save your progress or clear the canvas for something new.

Template

Replace the content with your own layout and keep the standard confirmation actions.

Headless

Customize the entire popup, including its actions, with a headless template.

Choose an action to see a confirmation.

Usage and API

Import AvConfirmPopup and provide AvConfirmationService on the page. Every popup request needs a connected target element. Use a distinct key for each popup or dialog sharing the same service.

TypeScript

import { inject } from '@angular/core';
import { AvConfirmPopup, AvConfirmationService } from 'avero-ui';

// Import AvConfirmPopup and provide AvConfirmationService on your page.
private readonly confirmations = inject(AvConfirmationService);

save(event: Event) {
  this.confirmations.confirm({
    target: event.currentTarget as HTMLElement,
    message: 'Save your latest changes?',
    acceptLabel: 'Save',
    accept: () => this.saveChanges(),
  });
}

HTML

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

Templates

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

<av-confirm-popup key="headless">
  <ng-template #headless let-confirmation
    let-onAccept="onAccept" let-onReject="onReject">
    <p>{{ confirmation.message }}</p>
    <button avButton data-default-focus (click)="onReject()">Cancel</button>
    <button avButton (click)="onAccept()">Confirm</button>
  </ng-template>
</av-confirm-popup>

Options. Requests support target, key, header (accessible name), message, icon (text), acceptLabel, rejectLabel, severity, accept and reject. Inputs include key, inputId, acceptLabel, rejectLabel, closeOnEscape and dismissable. Both dismissal options default to true. Placement is automatic.

Events. onHide emits accept, reject, dismiss or close. The reject callback distinguishes cancellation from dismissal. service.close(key) closes without invoking an action callback. Public accept() and reject() methods are also available for custom actions.

Accessibility. The native alert dialog keeps keyboard focus inside while open. Cancel receives initial focus; Escape or a click outside dismisses the popup and returns focus to its trigger. For headless content, use autofocus or data-default-focus to choose the initial control. The trigger receives aria-expanded and aria-controls while open.

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