Alert Dialog

Alert
Avatar

Alert Dialog

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

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

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

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

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

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.

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

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Media

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

Share this project?

Anyone with the link will be able to view and edit this project.

Destructive

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

Delete this chat?

This action cannot be undone. This will permanently delete the chat and remove it from your history.

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.

Invite team members?

Send an invitation link to your selected teammates.

RTL

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

هل أنت متأكد تماماً؟

لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائياً وإزالة بياناتك من خوادمنا.