Dialogs

Name: Rence Material
Author: david abalaku

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Critical Moments!

Interactive Alerts

Try launching one!

Dialogs use the standard Bootstrap 5 Modal API with enhanced Material 3 elevations and typography.

M3 Elevation!

HTML

<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content shadow">
      <div class="modal-header border-0 pb-0">
        <h5 class="modal-title">Get this party started?</h5>
      </div>
      <div class="modal-body text-muted">
        <p class="mb-0">Turn up the jams and have a good time.</p>
      </div>
      <div class="modal-footer border-0 pt-0 justify-content-end">
        <button class="btn btn-flat-primary" type="button" data-bs-dismiss="modal">Decline</button>
        <button class="btn btn-flat-primary text-primary" type="button">Accept</button>
      </div>
    </div>
  </div>
</div>

Trigger Usage

Easily trigger any dialog using standard data attributes.

HTML

<!-- Button that launches a dialog -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myDialog">
  Open Dialog
</button>

<div class="modal fade" id="myDialog" tabindex="-1">
  ...
</div>