Feedback

Alert Dialog

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

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

Usage#

app.component.ts

import { WdsAlertDialogComponent } from '@wds/angular/alert-dialog';

Use it for a decision the user must make before going on, such as confirming a deletion. For other content in a window use Dialog.

Examples#

Default#

show() opens the dialog, and the buttons in the footer slot close it with close(). There is no close button and a click on the backdrop does nothing; Escape works like Cancel. The first button (Cancel) gets focus.

Show dialog

Cancel

Continue

Show code

alert-dialog-default.ts

import { Component } from '@angular/core';
import { WdsAlertDialogComponent } from '@wds/angular/alert-dialog';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-alert-dialog-default-demo',
  imports: [WdsAlertDialogComponent, WdsButtonComponent],
  template: `
    <wds-button variant="outline" (click)="dialog.show()">Show dialog</wds-button>
    <wds-alert-dialog
      #dialog
      heading="Are you absolutely sure?"
      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
    >
      <wds-button slot="footer" variant="outline" (click)="dialog.close()">Cancel</wds-button>
      <wds-button slot="footer" (click)="dialog.close()">Continue</wds-button>
    </wds-alert-dialog>
  `,
})
export class AlertDialogDefaultDemo {}

Small with media#

size="sm" makes a narrow, centered dialog with the buttons side by side. An icon in the media slot shows above the title.

Connect accessory

Don't allow

Allow

Show code

alert-dialog-small.ts

import { Component } from '@angular/core';
import { WdsAlertDialogComponent } from '@wds/angular/alert-dialog';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-alert-dialog-small-demo',
  imports: [WdsAlertDialogComponent, WdsButtonComponent],
  template: `
    <wds-button variant="outline" (click)="dialog.show()">Connect accessory</wds-button>
    <wds-alert-dialog
      #dialog
      size="sm"
      heading="Allow accessory to connect?"
      description="Do you want to allow the USB accessory to connect to this device?"
    >
      <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 7 10 10-5 5V2l5 5L7 17" /></svg>
      <wds-button slot="footer" variant="outline" (click)="dialog.close()">Don't allow</wds-button>
      <wds-button slot="footer" (click)="dialog.close()">Allow</wds-button>
    </wds-alert-dialog>
  `,
})
export class AlertDialogSmallDemo {}

Destructive#

A destructive button for an action that deletes data. Cancel stays first, so a quick Enter does not delete anything.

Delete chat

Cancel

Delete

Show code

alert-dialog-destructive.ts

import { Component } from '@angular/core';
import { WdsAlertDialogComponent } from '@wds/angular/alert-dialog';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-alert-dialog-destructive-demo',
  imports: [WdsAlertDialogComponent, WdsButtonComponent],
  template: `
    <wds-button variant="destructive" (click)="dialog.show()">Delete chat</wds-button>
    <wds-alert-dialog
      #dialog
      size="sm"
      heading="Delete chat?"
      description="This will permanently delete this chat conversation. View Settings to delete any memories saved during this chat."
    >
      <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg>
      <wds-button slot="footer" variant="outline" (click)="dialog.close()">Cancel</wds-button>
      <wds-button slot="footer" variant="destructive" (click)="dialog.close()">Delete</wds-button>
    </wds-alert-dialog>
  `,
})
export class AlertDialogDestructiveDemo {}

Service#

In Angular, WdsAlertDialogService.open() builds the dialog from the config: title, description, cancelText / okText, okDestructive and size. closed emits true after OK and undefined after Cancel or Escape; content (content, data) works as in WdsDialogService. HTML and React have no service, so their tabs show the same dialog declared in the markup.

Discard draft

Result: none

Show code

alert-dialog-service.ts

import { Component, inject, signal } from '@angular/core';
import { WdsAlertDialogService } from '@wds/angular/alert-dialog';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-alert-dialog-service-demo',
  imports: [WdsButtonComponent],
  template: `
    <div class="flex flex-wrap items-center justify-center gap-3">
      <wds-button variant="outline" (click)="confirm()">Discard draft</wds-button>
      <span class="text-sm text-muted-foreground">Result: {{ result() }}</span>
    </div>
  `,
})
export class AlertDialogServiceDemo {
  private readonly alerts = inject(WdsAlertDialogService);
  protected readonly result = signal('none');

  protected confirm(): void {
    this.alerts
      .open<unknown, boolean>({
        title: 'Discard draft?',
        description: 'Your changes to this message will be lost.',
        cancelText: 'Keep editing',
        okText: 'Discard',
        okDestructive: true,
      })
      // OK closes with true; Cancel and Escape with undefined.
      .closed.subscribe((ok) => this.result.set(ok ? 'discarded' : 'kept'));
  }
}

API References#

wds-alert-dialog#

A modal dialog that interrupts the user with important content and expects a response, e.g. a confirmation before deleting data (role="alertdialog"). It has no close button and a click on the backdrop does not close it: the user answers with the buttons in the footer slot. Escape works like Cancel. Put the safe action (Cancel) first in the footer: the dialog focuses the first button when it opens.

Attributes

Attribute	Type	Default	Description
size	WdsAlertDialogSize	'default'	`sm`: a narrow, centered dialog with the buttons side by side.
open	boolean	false	Controls visibility. Also set by `show()` and `close()`.
heading	string	''	Title (or the `heading` slot).
description	string	''	Description under the title (or the `description` slot), linked as `aria-describedby`.
hide-close.hideClose	boolean	false	Hides the close button in the header.
static-backdrop.staticBackdrop	boolean	false	A click on the backdrop does not close it.
dismissible	boolean	true	`false` blocks closing with Escape, the backdrop (and dragging in a drawer).
close-label.closeLabel	string	'Zamknij'	Label of the close button.

Events

Event	Description
wds-closeCustomEvent<void>	Closing (a button calling `close()`, Escape), before the exit animation.
wds-after-closeCustomEvent<void>	After the exit animation.

Methods

Method	Description
show()	Opens it.
close()	Closes it.

Slots

Slot	Description
(default)	Extra content under the description (often empty).
heading	Custom heading (instead of the `heading` attribute).
description	Custom description (instead of the `description` attribute).
media	An icon above the title (e.g. a warning sign).
footer	The answers, e.g. Cancel and Delete buttons.

CSS parts (::part)

Part	Description
dialog	The native `<dialog>`.
panel	The content container.
header	The header.
media	The icon box.
title	The title.
description	The description.
body	The content.
footer	The footer.

CSS custom properties

Property	Description
--wds-dialog-width	Width of the window (default 32rem, with `size="sm"` 20rem).

Accessibility#

The window is a modal role="alertdialog" named by heading and described by description (aria-labelledby, aria-describedby), so screen readers read the question when it opens.

The rest of the page is inert while the dialog is open, and focus stays inside it.

The icon in the media slot is decorative: give it aria-hidden="true" and say everything in the title and the description.

Name the buttons by what they do ("Delete", "Keep editing"), not "Yes" and "No".

Keyboard support#

Key	Function
Tab	Moves focus to the next button. Focus does not leave the dialog.
ShiftTab	Moves focus to the previous button.
Enter	Activates the focused button.
Space	Activates the focused button.
Escape	Closes the dialog like Cancel.

Usage#

Examples#

Default#

Small with media#

Destructive#

Service#

API References#

wds-alert-dialog#

Attributes

Events

Methods

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#