Pattern Library

Modals

Modals should be used sparingly for actions or alerts that need to be focused on without fully changing the context of the action.

Standard Modals

For most cases, the standard modal size should suffice. Avoid having overly large or content heavy modals, as they can easily become overwhelming and unwieldy.

<div class="modal fade">
  <div class="modal__dialog">
    <div class="modal__content">
      <div class="modal__header">
        <button type="button" class="modal__close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">
            <svg class="modal__closeIcon">...</svg>
          </span>
        </button>
        <h4 class="modal__title">Modal title</h4>
      </div>
      <div class="modal__body">
        ...
      </div>
      <div class="modal__footer">
        <button type="button" class="button button--flat button--left" data-dismiss="modal">Standard action</button>
        <button type="button" class="button button--primary">Primary action</button>
      </div>
    </div>
  </div>
</div>

Animation Demo

Toggle the modal open with the button below. The modal fades and scales in.

<!-- Button trigger modal -->
<button class="button button--primary" type="button" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal__dialog" role="document">
    <div class="modal__content">
      <div class="modal__header">
        <button type="button" class="modal__close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><svg fill="#000000" class="modal__closeIcon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</span>
        </button>
        <h4 class="modal__title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal__body">
        ...
      </div>
      <div class="modal__footer">
        <button type="button" class="button button--flat button--left" data-dismiss="modal">Standard action</button>
        <button type="button" class="button button--primary">Primary action</button>
      </div>
    </div>
  </div>
</div>