Modals

1. Variant Matrix

Core modal families for common interaction scenarios

Informational Dialog

Confirmation Dialog

Form Dialog

2. Interaction Playground

Generate a live modal recipe from controls

Size

Header Accent

Vertically centered

Scrollable content

Static backdrop

Title icon

Footer actions

Live Output

Default Brand

Default size, brand header, footer actions enabled.

3. Size and Layout

Canonical width and viewport behavior options

Compact / default / expanded

Fullscreen behavior

4. State Modeling

Loading, destructive confirmation and blocked close patterns

Destructive confirm

Loading action

Static backdrop

5. Composition Patterns

Using modals inside table, form, and workflow contexts

Table row quick actions

Form step assistance

6. Real-use Snippets

Copy-ready snippets for confirms, forms, and static backdrop modals

Confirmation Modal

<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Action</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">This action cannot be undone.</div>
      <div class="modal-footer">
        <button class="btn btn-outline" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

Form Modal

<div class="modal fade" id="formModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Create Project</h5>
      </div>
      <div class="modal-body">
        <input class="form-control" placeholder="Project Name" />
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Static Backdrop Modal

<div class="modal fade" id="requiredModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Complete Required Steps</h5>
      </div>
      <div class="modal-body">Finish setup before closing this dialog.</div>
      <div class="modal-footer">
        <button class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>

Modal dialog patterns for confirmations, forms, and contextual workflows