7 Dialogues/Modals

Modals can be used to facilitate in-context tasks, wizards, and interactive notifications. Modals can contain other components or patterns to achieve task completion. Use modals sparingly and ensure correct display in mobile devices.

When used, at a minimum a modal should have a a clear header title and a close action (X). Other buttons or actions are at the discretion of the team and task at-hand.

If there is a primary and secondary action available as part of the modal, for example, "Save" and "Cancel" these actions should follow the standard pattern guidelines where the Primary action uses the Primary Button component placed in the bottom-right corner of the modal, and to the right of the "Cancel" button link.


<div class="form-group">
  <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h1 class="modal-title">Modal Header</h1>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      <div class="modal-footer">
        <button type="button" class="btn btn-subordinate" data-dismiss="modal">Cancel</button>
        <button class="btn btn-lg btn-primary" data-dismiss="modal">Save</button>