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

Example

HTML React Web Component
<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>
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 a 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 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.
  • When you want to highlight something.

Modals should not be used:

  • When 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.

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 22 November 2023
Home


Latest version 2.2.0