Modal

Modal is backed by a service utilising observables to display confirmation windows easily that can be shared by multiple actions on the same component.

When to use

Modals are used to draw the user’s attention to a sub-task, without taking them away from the current screen. Modal dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks.

Guidelines

Provide a call-to-action button, a close button or a cancel button.
Call-to-action button should be in the bottom right corner and the cancel button should be put beside it on the left side.
Make sure the language on the call-to-action button is clear to the user as to what action will be performed.
When the modal is open, use a light-box effect by darkening the background behind the modal and do not allow users to access the content behind the modal.
Ensure the modal is user-initiated and does not show it unexpectedly.
Avoid stacking modals on top of each other.
Do not over-complicate modals.

Basic

Modal is defined using modal-dialog class with heading, body and footer.

<!-- Button trigger modal -->
<button type="button" class="btn btn-ghost me-sm-0 me-md-3 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="bi bi-x-lg me-1"></i> Delete </button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal1">
<i class="bi bi-check2 x-lg me-1"></i> Confirm </button>
<!-- Modal -->  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body align-items-center d-flex">
      <span class="modal-message d-flex align-items-center">
      <i class="bi bi-info-circle fs-2 me-2"></i> Do you want to delete this record? </span>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-ghost" data-bs-dismiss="modal">
      <i class="bi bi-x-lg me-1"></i> No </button>
      <button type="button" class="btn btn-primary">
      <i class="bi bi-check2 me-1"></i> Yes </button>
    </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body align-items-center d-flex">
        <span class="modal-message d-flex align-items-center">
        <i class="bi bi-exclamation-triangle-fill fs-2 me-2"></i> Are you sure that you want to proceed? </span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" data-bs-dismiss="modal">
        <i class="bi bi-x-lg me-1"></i> No </button>
        <button type="button" class="btn btn-primary">
        <i class="bi bi-check2 me-1"></i> Yes </button>
      </div>
    </div>
  </div>
</div>

Accessibility

Add role="dialog" to the modal title.
Make sure all components in the modal are keyboard accessible.
After the modal opens, the initial focus should be set on the first focusable element in the modal.
After a modal closes, the focus should retain the user’s point of regard and return to the element that invoked the modal.
The focus must not move outside the modal until it is closed.
Use the alert modal dialog for the special cases that interrupts the user’s workflow to communicate a brief, important message and requires a user’s response.

When to use Guidelines Basic Accessibility