Modal

The modal component inform users about a specific task and may contain critical information which users then have to make a decision. E.g Accepting the T&Cs during signup

General

Example

Woohoo, you're reading this text in a modal!

HTML React Web Component 
<!-- position-static and d-block has been added for preview purpose. 
 Please remove it and add actions to dismiss and show modal.
  See Launch modal example below for real usage example -->
<div class="modal position-static d-block">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="exampleModalLabel">
        <i class="bi bi-exclamation-circle left me-3"></i>Modal title
      </h3>
      <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="modal-body">Woohoo, you're reading this text in a modal!</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark sgds">Close</button>
      <button type="button" class="btn btn-primary sgds">Save Changes</button>
    </div>
  </div>
</div>
</div>
 View on React storybook View on Web component storybook

HTML React Web Component 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch default modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>
 View on React storybook View on Web component storybook

Size

HTML React Web Component 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalSmall"
>
  Launch small modal
</button>
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalMedium"
>
  Launch large modal
</button>
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalLarge"
>
  Launch Extra large modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalSmall"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalMedium"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalLarge"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>
 View on React storybook View on Web component storybook

Scrollable

HTML React Web Component 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalScrollable"
>
  Launch scrollable modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalScrollable"
  tabindex="-1"
  aria-labelledby="exampleModalScrollableTitle"
  aria-modal="true"
>
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalScrollableTitle">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. 
        </p>

        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. 
        </p>

        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. 
        </p>

        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. 
        </p>

        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. 
        </p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
 View on React storybook View on Web component storybook

Fullscreen

HTML React Web Component 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalFullscreen"
>
  Full screen
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalFullscreen"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>
 View on React storybook View on Web component storybook

Anatomy

Modal Anatomy
  1. Icon (situational): Serves to give more context to what the modal is about.
  2. Title: Serves to tell users what the modal is about.
  3. Close icon (situational): Allows users to close the modal manually without the use of CTA buttons.
  4. Content: Serves to explain what the model is about. For e.g error messaging or confirmation messaging.
  5. CTA buttons: Serves to let users take an action or cancel.

Spacing

Modal Spacing

Within the modal
Ensure that there is at least 24px of spacing within the modal and between content elements.

Usage guidelines

Modals should be used when:

  1. You want to interrupt a user's current task to direct the user's attention to something important. For example, confirming when a user wants to submit a form, user sign up and login, or highlighting an important event with an infographic upon entering your website.
  2. You want to highlight something.

Modals should not be used when:

  1. You need to present simple notifications to the user. It should always accompany something actionable by the user such as confirming or filling in a form. If you need to notifiy the user, use something less intrusive such as the notification component instead.

Usability guidelines

User triggered
Modals should always appear as a result of a action that a user has taken like when submitting a application. Modals should not be automatically displayed to the user. Some exceptions to the rule would be if you need to inform users that their session is about to time out or if they have to accept cookies before proceeding.

Clear heading labels and CTAs
Ensure that the heading and CTAs are clear to the user. This avoids confusion and indicates what action needs to be taken.

Try to avoid long content with scrolling
Long content with scrolling limits a user's ability to view the entire message due to the limited space.

Behaviour
Allow users to close the modal by clicking the backdrop (the area outside the modal) and by pressing the Esc key.

Accessibility guidelines

Aria attributes

  1. The element that serves as the dialog container has a role="dialog".
  2. All elements required to operate the dialog are descendants of the element that has role="dialog".
  3. The dialog container element has aria-modal="true".

Keyboard accessibility

  1. Tab or Shift-Tab to move the focus between elements within the modal.
  2. Enter or Space to select action buttons or interactive elements.
  3. Esc to close the modal.

Focus indicator

  1. When the modal opens, move focus to the first interactive element within the modal. When the modal closes, return focus to the element that triggered the modal.
  2. Ensure all interactive elements within the modal are keyboard navigable. Trap focus within the modal so that tabbing does not navigate to elements outside the modal.
  3. Include a close button and ensure it is keyboard accessible and properly labeled using aria-label.

Modal design tokens 

$modal-inner-padding:$spacer !default;
$modal-footer-margin-between:.5rem !default; $modal-dialog-margin:.5rem
!default; $modal-dialog-margin-y-sm-up:1.75rem !default;
$modal-title-line-height:$line-height-base !default; $modal-content-color:null
!default; $modal-content-bg:$white !default;
$modal-content-border-color:rgba($black, .2) !default;
$modal-content-border-width:$border-width !default;
$modal-content-border-radius:$border-radius-lg !default;
$modal-content-inner-border-radius:subtract($modal-content-border-radius,
$modal-content-border-width) !default;
$modal-content-box-shadow-xs:$box-shadow-sm !default;
$modal-content-box-shadow-sm-up:$box-shadow !default; $modal-backdrop-bg: $black
!default; $modal-backdrop-opacity: .5 !default; $modal-header-border-color:
$border-color !default; $modal-footer-border-color: $modal-header-border-color
!default; $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default; $modal-header-padding-x:
$modal-inner-padding !default; $modal-header-padding: $modal-header-padding-y
$modal-header-padding-x !default; // Keep this for backwards compatibility
$modal-sm: 300px !default; $modal-md: 500px !default; $modal-lg: 800px !default;
$modal-xl: 1140px !default; $modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default; $modal-transition: transform .3s ease-out
!default; $modal-scale-transform: scale(1.02) !default;
Last updated 02 October 2024
Home
Latest version 2.3.5