Skip to component content

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response, built on Dialog's static-backdrop option.

Usage

Use a Bootstrap .modal as an alert dialog when the user must acknowledge or confirm a consequential choice before continuing. Open it from a clear trigger with data-bs-toggle="modal" and data-bs-target, label the dialog from its title with aria-labelledby, and connect the supporting explanation with aria-describedby.

Keep the content short and decision-focused: one title, one explanation, and explicit cancel and confirm actions in the footer. For irreversible choices, use a static backdrop with data-bs-backdrop="static" and data-bs-keyboard="false" so the user cannot dismiss the dialog accidentally with backdrop click or Escape.

Because Alert Dialog is built on Bootstrap's Modal plugin, it appears above the page, traps interaction while open, and should not be nested inside another modal. Keep dismissal buttons visible, use data-bs-dismiss="modal" on safe exits, and return the user to a sensible place in the workflow after the dialog closes.

Basic

A title, description, and Cancel/Continue-style actions; the backdrop and Escape key are both disabled.

Alert Dialog 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-basic">Discard draft</button>
<div
    class="modal fade modal--alert"
    id="alert-dialog-basic"
    tabindex="-1"
      aria-labelledby="alert-dialog-basic-title"
aria-describedby="alert-dialog-basic-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <div class="modal-header__content">
          <h1 class="modal-title" id="alert-dialog-basic-title">Discard this draft invoice?</h1>
          <p class="modal-description" id="alert-dialog-basic-description">Any line items you have entered will be lost. This cannot be undone.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" type="button" data-bs-dismiss="modal">Discard</button>
      </div>
    </div>
  </div>
</div>

Small

size="sm" reuses Dialog's existing modal-sm class for compact confirmations.

Alert Dialog 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-small">Leave without saving</button>
<div
    class="modal fade modal--alert"
    id="alert-dialog-small"
    tabindex="-1"
      aria-labelledby="alert-dialog-small-title"
aria-describedby="alert-dialog-small-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <div class="modal-header__content">
          <h1 class="modal-title" id="alert-dialog-small-title">Leave without saving?</h1>
          <p class="modal-description" id="alert-dialog-small-description">Your changes to this record will not be kept.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" type="button" data-bs-dismiss="modal">Leave</button>
      </div>
    </div>
  </div>
</div>

Small with media

Use the compact size with a small icon when a short confirmation needs extra signal.

Alert Dialog 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-small-media">Stop import</button>
<div
    class="modal fade modal--alert"
    id="alert-dialog-small-media"
    tabindex="-1"
      aria-labelledby="alert-dialog-small-media-title"
aria-describedby="alert-dialog-small-media-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <span class="btn btn-icon-sm btn-outline-secondary flex-shrink-0" aria-hidden="true">
          <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <div class="modal-header__content">
          <h1 class="modal-title" id="alert-dialog-small-media-title">Stop this import?</h1>
          <p class="modal-description" id="alert-dialog-small-media-description">Rows that have not finished processing will stay queued for the next run.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Keep running</button>
        <button class="btn btn-primary" type="button" data-bs-dismiss="modal">Stop import</button>
      </div>
    </div>
  </div>
</div>

Media

Add a small decorative icon beside the confirmation title when the action benefits from an extra visual cue.

Alert Dialog 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-media">Pause sync</button>
<div
    class="modal fade modal--alert"
    id="alert-dialog-media"
    tabindex="-1"
      aria-labelledby="alert-dialog-media-title"
aria-describedby="alert-dialog-media-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <span class="btn btn-icon-sm btn-outline-secondary flex-shrink-0" aria-hidden="true">
          <i class="lucide lucide-cloud-off" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <div class="modal-header__content">
          <h1 class="modal-title" id="alert-dialog-media-title">Pause nightly synchronization?</h1>
          <p class="modal-description" id="alert-dialog-media-description">New records will wait in the import queue until the next manual run.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Keep running</button>
        <button class="btn btn-primary" type="button" data-bs-dismiss="modal">Pause sync</button>
      </div>
    </div>
  </div>
</div>

Destructive action

Pair the outline Cancel button with a destructive-variant action for irreversible operations.

Alert Dialog 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-destructive">Delete customer</button>
<div
    class="modal fade modal--alert"
    id="alert-dialog-destructive"
    tabindex="-1"
      aria-labelledby="alert-dialog-destructive-title"
aria-describedby="alert-dialog-destructive-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <div class="modal-header__content">
          <h1 class="modal-title" id="alert-dialog-destructive-title">Delete this customer record?</h1>
          <p class="modal-description" id="alert-dialog-destructive-description">This removes their profile and order history permanently.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger" type="button" data-bs-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>

RTL

Use tabs to compare Arabic, Hebrew, and English alert dialogs inside the same right-to-left layout.

<div dir="rtl">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-rtl">حذف بيانات العميل</button>
  <div
      class="modal fade modal--alert"
      id="alert-dialog-rtl"
      tabindex="-1"
        aria-labelledby="alert-dialog-rtl-title"
  aria-describedby="alert-dialog-rtl-description"    aria-hidden="true"
  dir="rtl"data-bs-backdrop="static" data-bs-keyboard="false"  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header modal-header--alert">
          <div class="modal-header__content">
            <h1 class="modal-title" id="alert-dialog-rtl-title">هل تريد حذف بيانات هذا العميل؟</h1>
            <p class="modal-description" id="alert-dialog-rtl-description">سيؤدي هذا إلى إزالة ملفه الشخصي وسجل الطلبات نهائيًا.</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">إلغاء</button>
          <button class="btn btn-danger" type="button" data-bs-dismiss="modal">حذف</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div dir="rtl">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-rtl-hebrew">מחיקת נתוני לקוח</button>
  <div
      class="modal fade modal--alert"
      id="alert-dialog-rtl-hebrew"
      tabindex="-1"
        aria-labelledby="alert-dialog-rtl-hebrew-title"
  aria-describedby="alert-dialog-rtl-hebrew-description"    aria-hidden="true"
  dir="rtl"data-bs-backdrop="static" data-bs-keyboard="false"  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header modal-header--alert">
          <div class="modal-header__content">
            <h1 class="modal-title" id="alert-dialog-rtl-hebrew-title">למחוק את נתוני הלקוח האלה?</h1>
            <p class="modal-description" id="alert-dialog-rtl-hebrew-description">פעולה זו מסירה את פרופיל הלקוח ואת היסטוריית ההזמנות לצמיתות.</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">ביטול</button>
          <button class="btn btn-danger" type="button" data-bs-dismiss="modal">מחיקה</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div dir="ltr">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#alert-dialog-rtl-english">Delete customer data</button>
  <div
      class="modal fade modal--alert"
      id="alert-dialog-rtl-english"
      tabindex="-1"
        aria-labelledby="alert-dialog-rtl-english-title"
  aria-describedby="alert-dialog-rtl-english-description"    aria-hidden="true"
  dir="ltr"data-bs-backdrop="static" data-bs-keyboard="false"  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header modal-header--alert">
          <div class="modal-header__content">
            <h1 class="modal-title" id="alert-dialog-rtl-english-title">Delete this customer data?</h1>
            <p class="modal-description" id="alert-dialog-rtl-english-description">This removes the customer profile and order history permanently.</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-danger" type="button" data-bs-dismiss="modal">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
Bootstrap plugin
Markup
Moo UI documented extension
Reference

For the underlying Modal plugin options, focus management, and accessibility notes, see the Bootstrap Modal documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Overlay Scrollbar Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.