Skip to main content

Dialogs

Purpose

Dialogs provide the user with a focused way of accomplishing, confirming, or viewing something without entirely leaving a screen or page.

Description

  • Dialogs are useful for interactions that are relatively quick (less than a couple minutes)
  • Dialogs float above the application until the user has taken a desired action or dismissed the dialog
  • Dialogs can be used for managing settings, editing/creating simple objects, confirming an action, or any other set of information/actions that warrant not leaving the page
  • Dialogs are usually opened from a click action
  • Dialogs may or may not block interactions “behind” or “under” the dialog (see modes)
  • If there is a non-destructive dismiss/cancel, dialogs can be closed by clicking outside of the dialog

Components

Header / title bar
  • Short and concise title
  • Sentence case title
  • Dismiss (X) icon if a non-destructive ‘cancel/done’ is applicable
Content
  • Can contain text or UI controls focused on a particular task, process, or entitiy
  • Can scroll independently depending on the content, creating a pinned header/footer
Footer
  • Contains action buttons
  • Primary action buttons are right aligned
  • In some circumstances cancel/previous may be left aligned
  • Use button styles that match the actions/priority, but if there more than two buttons with similar actions/priority, use the default button style for them all
  • Buttons should use action verbs that describe by themselves what will happen on click (e.g., ‘Delete user’ instead of ‘Ok’)
Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Rename file</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form" class="">
          <div class="form-group">
            <label for="tb12" class="control-label"
              >Enter a new file name</label
            >
            <input
              type="text"
              class="form-control"
              id="tb12"
              value="dialogs.md"
            />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-sm btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Rename file</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form" class="">
          <div class="form-group">
            <label for="tb123" class="control-label"
              >Enter a new file name</label
            >
            <input
              type="text"
              class="form-control"
              id="tb123"
              value="dialogs.md"
            />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-link" data-dismiss="modal">
          Close
        </button>
        &nbsp;
        <button type="button" class="btn btn-sm btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Find and replace</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="exampleFormControlInput1">Find</label>
            <input
              type="text"
              class="form-control"
              id="exampleFormControlInput1"
            />
          </div>
          <div class="form-group">
            <label for="exampleFormControlInput2">Replace with</label>
            <input
              type="email"
              class="form-control"
              id="exampleFormControlInput2"
            />
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="defaultCheck1"
              checked=""
            />
            <label class="form-check-label" for="defaultCheck1">
              Match case
            </label>
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="defaultCheck2"
              checked=""
            />
            <label class="form-check-label" for="defaultCheck2">
              Whole word
            </label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
         <button
          type="button"
          class="btn btn-sm btn-outline-primary mr-auto"
          data-dismiss="modal"
        >
          Close
        </button>
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
          disabled=""
        >
          Replace
        </button>
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
        >
          Replace all
        </button>
       
        <button
          type="button"
          class="btn btn-sm btn-primary"
          data-dismiss="modal"
        >
          Find
        </button>
      </div>
    </div>
  </div>
</div>
Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-success">Thank you!</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Your request has been submitted.</p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
        >
          Back
        </button>
        <button type="button" class="btn btn-sm btn-success">
          View request
        </button>
      </div>
    </div>
  </div>
</div>

Confirmation

A confirmation dialog is short, simple dialog that ensures the user is performing an action intentionally. This is especially useful for dangerous or irreversible operations.

Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-danger">Delete this user</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>All user information will be deleted.</p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
        >
          Cancel
        </button>
        <button type="button" class="btn btn-sm btn-danger">Delete user</button>
      </div>
    </div>
  </div>
</div>
Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Abandon changes?</h1>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>You have unsaved changes. Your changes will be lost.</p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-sm btn-outline-primary"
          data-dismiss="modal"
        >
          Leave this page
        </button>
        <button type="button" class="btn btn-sm btn-primary">
          Stay on this page
        </button>
      </div>
    </div>
  </div>
</div>

Actionless

An actionless dialog may block user interaction for a period of time, usually until something finishes or some other event occurs.

Example HTML usage: 
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div style="margin-bottom: 6px" class="clearfix">
          <div class="pull-left">Uploading document...</div>
        </div>
        <div class="progress">
          <div
            class="progress-bar"
            role="progressbar"
            style="width: 65%"
            aria-valuenow="25"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            25%
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Modes

Dialogs can prevent the user from performing actions behind/around the dialog if desired. There are 3 general modes:

  • Modal: A modal dialog prevents the user from interacting with all other areas of the application until the dialog is dismissed.
  • Modeless: A modeless dialog allows the user interact with all other areas of the application without dismissing the dialog.
  • Mixed-modal: A mixed-modal dialog may block some areas of the application, but not others. E.g., a dialog pertaining to one document, but not another visible document.

Live