Modals

Modals are overlaying patterns and will intentionally obscure information behind it as such they can be disruptive. Modals require action before the user can continue interacting with the rest of UserTesting.

Multi-Action Modal

Diagon Alley

The Wizarding World's luxury shopping centre

Receive 20% off when shopping at the Leaky Cauldron!

<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modal').openModal()"
  type="button"
>
  Action Modal
</button>
<div id="result"></div>
<tk-modal id="modal">
  <tk-modal-header>
    Diagon Alley
    <p slot="subtitle">The Wizarding World's luxury shopping centre</p>
  </tk-modal-header>
  <p>Receive 20% off when shopping at the Leaky Cauldron!</p>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modal').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
    <button
      aria-label="Get Coupon"
      class="btn--primary"
      onclick="document.getElementById('modal').closeModal('OK button')"
      type="button"
    >
      OK
    </button>
  </tk-modal-footer>
</tk-modal>
<script>
  var modal = document.getElementById('modal');
  var result = document.getElementById('result');
  modal.addEventListener('close', (e) => result.innerText = `modal was closed: ${e.detail}`);
</script>

Description

Multi-action modals have two buttons a primary and a secondary. The primary action should confirm or navigate a customer from the modal. The secondary action should allow the customer to dismiss the modal. The primary action should be on the right and the secondary action should be on the left.

Variant: Close

Gringotts Wizarding Bank

Be advised the Bank will be closed on Sundays for dragon cleaning.

<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modalExample2').openModal()"
  type="button"
>
  Open Modal
</button>
<tk-modal id="modalExample2">
  <tk-modal-header>
    Gringotts Wizarding Bank
  </tk-modal-header>
  <p>Be advised the Bank will be closed on Sundays for dragon cleaning.</p>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modalExample2').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
  </tk-modal-footer>
</tk-modal>

Description

This pattern has a single action to dismiss the modal. It should use the secondary action.

Size: Small

Small Modal

Be advised the Bank will be closed on Sundays for dragon cleaning.

<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modalExample3').openModal()"
  type="button"
>
  Show Small
</button>
<tk-modal id="modalExample3" size="small">
  <tk-modal-header>
    Small Modal
  </tk-modal-header>
  <p>Be advised the Bank will be closed on Sundays for dragon cleaning.</p>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modalExample3').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
  </tk-modal-footer>
</tk-modal>

Description

Add size="small" to tk-modal for the small size.

Size: Medium (Default)

Medium Modal

Be advised the Bank will be closed on Sundays for dragon cleaning.

<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modalExample4').openModal()"
  type="button"
>
  Show Medium
</button>
<tk-modal id="modalExample4">
  <tk-modal-header>
    Medium Modal
  </tk-modal-header>
  <p>Be advised the Bank will be closed on Sundays for dragon cleaning.</p>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modalExample4').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
  </tk-modal-footer>
</tk-modal>

Description

Since this is the default, you don’t have to pass in a size.

Size: Large

Large Modal

Be advised the Bank will be closed on Sundays for dragon cleaning.

<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modalExample5').openModal()"
  type="button"
>
  Show Large
</button>
<tk-modal id="modalExample5" size="large">
  <tk-modal-header>
    Large Modal
  </tk-modal-header>
  <p>Be advised the Bank will be closed on Sundays for dragon cleaning.</p>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modalExample5').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
  </tk-modal-footer>
</tk-modal>

Description

Add size="large" to tk-modal for the large size.

Canvas Mode

Canvas Mode Card floats above the darker background color.
<button
  aria-haspopup="true"
  class="btn--primary"
  onclick="document.getElementById('modalExample6').openModal()"
  type="button"
>
  Show Canvas
</button>
<tk-modal id="modalExample6" size="large" canvas>
  <tk-modal-header>
    Canvas Mode
  </tk-modal-header>
  <tk-container size="small">
    Card floats above the darker background color.
  </tk-container>
  <tk-modal-footer>
    <button
      aria-label="Close Modal"
      class="btn--tertiary mr-2x"
      onclick="document.getElementById('modalExample6').closeModal('Close button')"
      type="button"
    >
      Close
    </button>
  </tk-modal-footer>
</tk-modal>

Description

Add canvas="true" to tk-modal for canvas mode.

Props

Property Options Default Description
size small, medium, large, xl medium Sets the size of the modal.
scroll-overflow true Determines if the inner content of the modal scrolls if the height is larger than it.
canvas false Alternate color scheme to have lighter elements appear above a darker background.

Do

  • Provide clear titles and headings in modals
  • Please use discretion when applying this pattern as it may be overwhelming to a user

Don't

  • Include an x in the top right of the modal

Accessibility

  • Does receive :focus when opened
  • Action-launching modal should have aria-haspopup="true"
  • Buttons in modal footer should have aria-label to provide more context