# Alert Dialog

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

```mdx
<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>
```

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```

Or import only the base CSS, Alert Dialog component CSS, and one style pack.

```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/dialog.css";
@import "basecoat-css/styles/vega.css";
```

Alert Dialog uses the Dialog component CSS.

Using CDN or bundler imports? See the [Installation page](/installation).

  </Step>
  <Step title="Add your alert dialog HTML">

Alert Dialog uses a native `<dialog class="alert-dialog">` element. Omit the close button and backdrop-click handler when the user must choose an explicit action.

```html
<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>
```

  </Step>
</Steps>

### HTML structure

<dl>
  <dt><code>&lt;button type="button" onclick="dialog.showModal()"&gt;</code> <span class="badge" data-variant="secondary">Optional</span></dt>
  <dd>Trigger button. Basecoat uses the native <code>HTMLDialogElement.showModal()</code> method.</dd>
  <dt><code>&lt;dialog class="alert-dialog" id="&#123; DIALOG_ID &#125;"&gt;</code></dt>
  <dd>
    Native modal dialog. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present. Use <code>data-size="sm"</code> for the compact upstream size.
    <dl>
      <dt><code>&lt;div&gt;</code></dt>
      <dd>
        Dialog content surface.
        <dl>
          <dt><code>&lt;header&gt;</code></dt>
          <dd>
            Alert dialog header.
            <dl>
              <dt><code>&lt;figure&gt;</code> <span class="badge" data-variant="secondary">Optional</span></dt>
              <dd>Media area for an icon or image.</dd>
              <dt><code>&lt;h2 id="&#123; TITLE_ID &#125;"&gt;</code></dt>
              <dd>Alert dialog title. Reference it from <code>aria-labelledby</code>.</dd>
              <dt><code>&lt;p id="&#123; DESCRIPTION_ID &#125;"&gt;</code> <span class="badge" data-variant="secondary">Optional</span></dt>
              <dd>Alert dialog description. Reference it from <code>aria-describedby</code>.</dd>
            </dl>
          </dd>
          <dt><code>&lt;footer&gt;</code></dt>
          <dd>Action area. Include a cancel action and the primary action.</dd>
        </dl>
      </dd>
    </dl>
  </dd>
</dl>

## Examples

### Basic

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

```mdx
<button type="button" onclick="document.getElementById('alert-dialog-basic').showModal()" class="btn" data-variant="outline">Show Dialog</button>
<dialog id="alert-dialog-basic" class="alert-dialog" aria-labelledby="alert-dialog-basic-title" aria-describedby="alert-dialog-basic-description">
  <div>
    <header>
      <h2 id="alert-dialog-basic-title">Are you absolutely sure?</h2>
      <p id="alert-dialog-basic-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>
```

### Media

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

```mdx
<button type="button" onclick="document.getElementById('alert-dialog-media').showModal()" class="btn" data-variant="outline">Share Project</button>
<dialog id="alert-dialog-media" class="alert-dialog" aria-labelledby="alert-dialog-media-title" aria-describedby="alert-dialog-media-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-circle-fading-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 7.38 16.75" /><path d="M12 8v8" /><path d="M16 12H8" /><path d="M2.5 8.88a10 10 0 0 0 0 6.24" /><path d="M4.64 4.64a10 10 0 0 0 0 14.72" /></svg></figure>
      <h2 id="alert-dialog-media-title">Share this project?</h2>
      <p id="alert-dialog-media-description">Anyone with the link will be able to view and edit this project.</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" onclick="this.closest('dialog').close()">Share</button>
    </footer>
  </div>
</dialog>
```

### Destructive

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

```mdx
<button type="button" onclick="document.getElementById('alert-dialog-destructive').showModal()" class="btn" data-variant="destructive">Delete Chat</button>
<dialog id="alert-dialog-destructive" class="alert-dialog" aria-labelledby="alert-dialog-destructive-title" aria-describedby="alert-dialog-destructive-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-trash-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg></figure>
      <h2 id="alert-dialog-destructive-title">Delete this chat?</h2>
      <p id="alert-dialog-destructive-description">This action cannot be undone. This will permanently delete the chat and remove it from your history.</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" data-variant="destructive" onclick="this.closest('dialog').close()">Delete</button>
    </footer>
  </div>
</dialog>
```

### 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.

```mdx
<button type="button" onclick="document.getElementById('alert-dialog-small').showModal()" class="btn" data-variant="outline">Invite Members</button>
<dialog id="alert-dialog-small" class="alert-dialog" data-size="sm" aria-labelledby="alert-dialog-small-title" aria-describedby="alert-dialog-small-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-users" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg></figure>
      <h2 id="alert-dialog-small-title">Invite team members?</h2>
      <p id="alert-dialog-small-description">Send an invitation link to your selected teammates.</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" onclick="this.closest('dialog').close()">Invite</button>
    </footer>
  </div>
</dialog>
```

### RTL

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

```mdx
<div dir="rtl">
  <button type="button" onclick="document.getElementById('alert-dialog-rtl').showModal()" class="btn" data-variant="outline">إظهار الحوار</button>
  <dialog id="alert-dialog-rtl" class="alert-dialog" aria-labelledby="alert-dialog-rtl-title" aria-describedby="alert-dialog-rtl-description">
    <div>
      <header>
        <h2 id="alert-dialog-rtl-title">هل أنت متأكد تماماً؟</h2>
        <p id="alert-dialog-rtl-description">لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائياً وإزالة بياناتك من خوادمنا.</p>
      </header>
      <footer>
        <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">إلغاء</button>
        <button class="btn" onclick="this.closest('dialog').close()">متابعة</button>
      </footer>
    </div>
  </dialog>
</div>
```