#Alert Dialog

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

#Usage

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/dialog.css";
@import "@a3s-lab/ui/styles/a3s.css";

<button type="button" onclick="document.getElementById('demo-alert-dialog').showModal()" class="btn" data-variant="outline">Show Dialog</button>
<dialog id="demo-alert-dialog" class="alert-dialog" aria-labelledby="demo-alert-dialog-title" aria-describedby="demo-alert-dialog-description">
  <div>
    <header>
      <h2 id="demo-alert-dialog-title">Are you absolutely sure?</h2>
      <p id="demo-alert-dialog-description">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" onclick="this.closest('dialog').close()">Continue</button>
    </footer>
  </div>
</dialog>

#HTML structure

<button type="button" onclick="dialog.showModal()"> Optional

Trigger button. A3S UI uses the native HTMLDialogElement.showModal() method.

<dialog class="alert-dialog" id="{ DIALOG_ID }">

Native modal dialog. Add aria-labelledby and aria-describedby when title and description are present. Use data-size="sm" for the compact upstream size.

<div>

Dialog content surface.

<header>

Alert dialog header.

<figure> Optional

Media area for an icon or image.

<h2 id="{ TITLE_ID }">

Alert dialog title. Reference it from aria-labelledby.

<p id="{ DESCRIPTION_ID }"> Optional

Alert dialog description. Reference it from aria-describedby.

<footer>

Action area. Include a cancel action and the primary action.

#Examples

#Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

#Media

Use a <figure> in the header to add a media element such as an icon or image to the alert dialog.

#Destructive

Use a destructive action button when the alert dialog confirms a destructive operation.

#Small

Use data-size="sm" for a compact alert dialog. The small size keeps media, title, and description stacked and centers the action buttons in a two-column footer.

#RTL

Alert Dialog supports document direction. Set dir="rtl" on the dialog or a parent element.