Skip to main content
Rivet Design System Indiana University

Dialog

Present content in a smaller window that is displayed on top of the main application or site content

Overview #

Use the dialog component to present content in a smaller window that is displayed on top of the main application or site content.

Examples #

The examples on this page are best viewed in a new window.


Open in new window
Copy link to example 
<button type="button" class="rvt-button" data-rvt-dialog-trigger="dialog-example">
  <span>Dialog example</span>
</button>
<div class="rvt-dialog" id="dialog-example" role="dialog" tabindex="-1" aria-labelledby="dialog-title" aria-describedby="dialog-description" data-rvt-dialog="dialog-example" hidden>
  <header class="rvt-dialog__header">
    <h1 class="rvt-dialog__title" id="dialog-title">Dialog title</h1>
  </header>
  <div class="rvt-dialog__body">
    <p id="dialog-description">The default dialog appears near the middle of the screen. It does not darken the page behind it and does not close when the user clicks outside of it. You can use data attributes to configure the appearance and behavior of the dialog.</p>
  </div>
  <div class="rvt-dialog__controls">
    <button type="button" class="rvt-button" role="button">
      <span>OK</span>
    </button>
    <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-example" role="button">
      <span>Cancel</span>
    </button>
  </div>
  <button class="rvt-button rvt-button--plain rvt-dialog__close" data-rvt-dialog-close="dialog-example" role="button">
    <span class="rvt-sr-only">Close</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
  </button>
</div>
Open in new window
Copy link to example 
<button type="button" class="rvt-button" data-rvt-dialog-trigger="dialog-example">
  <span>Modal dialog</span>
</button>
<div class="rvt-dialog" id="dialog-example" role="dialog" tabindex="-1" aria-labelledby="dialog-title" aria-describedby="dialog-description" data-rvt-dialog="dialog-example" data-rvt-dialog-modal data-rvt-dialog-darken-page data-rvt-dialog-disable-page-interaction hidden>
  <header class="rvt-dialog__header">
    <h1 class="rvt-dialog__title" id="dialog-title">Dialog title</h1>
  </header>
  <div class="rvt-dialog__body">
    <p id="dialog-description">This dialog darkens the background, disables interaction with the page behind it, and closes when the user clicks outside of it.</p>
  </div>
  <div class="rvt-dialog__controls">
    <button type="button" class="rvt-button" role="button">
    <span>OK</span>
    </button>
    <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-example" role="button">
    <span>Cancel</span>
    </button>
  </div>
  <button class="rvt-button rvt-button--plain rvt-dialog__close" data-rvt-dialog-close="dialog-example" role="button">
    <span class="rvt-sr-only">Close</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
  </button>
</div>
Open in new window
Copy link to example 
<button type="button" class="rvt-button rvt-button--danger" data-rvt-dialog-trigger="dialog-confirmation">
  <span>Delete files</span>
</button>
<div class="rvt-dialog" id="dialog-confirmation" role="dialog" tabindex="-1" aria-labelledby="dialog-title" aria-describedby="dialog-description" data-rvt-dialog="dialog-confirmation" data-rvt-dialog-modal data-rvt-dialog-darken-page data-rvt-dialog-disable-page-interaction hidden>
  <header class="rvt-dialog__header">
    <h1 class="rvt-dialog__title" id="dialog-title">Delete files</h1>
  </header>
  <div class="rvt-dialog__body">
    <p class="m-top-remove m-bottom-xl" id="dialog-description">Are you sure you want to <strong>delete your files</strong>? This action cannot be undone.</p>
  </div>
  <div class="rvt-dialog__controls">
    <button type="button" class="rvt-button rvt-button--danger" role="button">
      <span>Delete my files</span>
    </button>
    <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-confirmation" role="button">
      <span>Cancel</span>
    </button>
  </div>
</div>
Open in new window
Copy link to example 
<button type="button" class="rvt-button" data-rvt-dialog-trigger="dialog-form">
  <span>Dialog with form</span>
</button>
<div class="rvt-dialog" id="dialog-form" role="dialog" tabindex="-1" aria-labelledby="dialog-title" data-rvt-dialog="dialog-form" data-rvt-dialog-modal data-rvt-dialog-darken-page data-rvt-dialog-disable-page-interaction hidden>
  <header class="rvt-dialog__header">
    <h1 class="rvt-dialog__title" id="dialog-title">Dialog title</h1>
  </header>
  <form>
    <div class="rvt-dialog__body">
      <div class="m-bottom-sm">
        <label class="rvt-label" for="the-title">Title</label>
        <input class="rvt-text-input" type="text" id="the-title">
      </div>
      <label class="rvt-label" for="description">Description</label>
      <textarea class="rvt-textarea" id="description"></textarea>
      <fieldset class="rvt-fieldset">
        <legend class="rvt-ts-20 rvt-m-bottom-sm"><strong>Select dropdown</strong> default</legend>
        <label class="rvt-label" for="select-demo">Select input:</label>
        <select class="rvt-select m-bottom-md" id="select-demo">
          <option value="">Option One</option>
          <option value="">Option Two</option>
          <option value="">Option Three</option>
          <option value="">Option Four</option>
        </select>
      </fieldset>
      <fieldset class="rvt-fieldset rvt-m-top-xl">
        <legend class="rvt-ts-20 rvt-text-bold">Category</legend>
        <ul class="rvt-list-inline">
          <li>
            <div class="rvt-checkbox">
              <input type="checkbox" name="checkbox-demo" id="checkbox-1" checked>
              <label for="checkbox-1">Option one</label>
            </div>
          </li>
          <li>
            <div class="rvt-checkbox">
              <input type="checkbox" name="checkbox-demo" id="checkbox-2">
              <label for="checkbox-2">Option two</label>
            </div>
          </li>
          <li>
            <div class="rvt-checkbox">
              <input type="checkbox" name="checkbox-demo" id="checkbox-3">
              <label for="checkbox-3">Option three</label>
            </div>
          </li>
        </ul>
      </fieldset>
    </div>
    <div class="rvt-dialog__controls">
      <button type="button" class="rvt-button" role="button">
        <span>Submit</span>
      </button>
      <button type="button" class="rvt-button" data-rvt-dialog-close="dialog-form" role="button">
        <span>Cancel</span>
      </button>
    </div>
  </form>
  <button class="rvt-button rvt-button--plain rvt-dialog__close" data-rvt-dialog-close="dialog-form" role="button">
    <span class="rvt-sr-only">Close</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
  </button>
</div>
Open in new window
Copy link to example 
<div class="rvt-dialog" id="dialog-notification" role="dialog" tabindex="-1" hidden aria-describedby="dialog-description" data-rvt-dialog="dialog-notification" data-rvt-dialog-open-on-init data-rvt-dialog-top-right>
  <header class="rvt-dialog__header">
    <h1 class="rvt-dialog__title" id="dialog-title">New version available</h1>
  </header>
  <div class="rvt-dialog__body">
    <p class="rvt-m-all-none" id="dialog-description">A new version of this application is available. Refresh the page to apply the update.</p>
  </div>
  <button class="rvt-button rvt-button--plain rvt-dialog__close" data-rvt-dialog-close="dialog-notification" role="button">
    <span class="rvt-sr-only">Close</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
  </button>
</div>
Open in new window
Copy link to example 
<div class="rvt-dialog" id="dialog-help-widget" role="dialog" tabindex="-1" hidden aria-describedby="dialog-description" data-rvt-dialog="dialog-help-widget" data-rvt-dialog-open-on-init data-rvt-dialog-bottom-right>
  <div class="rvt-dialog__body">
    <p class="rvt-m-all-none" id="dialog-description">Do you need help with your task? Support center technicians are available over chat to provide live assistance.</p>
  </div>
  <div class="rvt-dialog__controls">
    <button type="button" class="rvt-button" role="button">
      <span>Chat</span>
    </button>
    <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-help-widget" role="button">
      <span>No thanks</span>
    </button>
  </div>
</div>

Attributes #

Use the following attributes to configure a dialog:

Attribute Description
data-rvt-dialog-open-on-init Add to the root data-rvt-dialog element to open the dialog on page load.
data-rvt-dialog-modal Add to the root data-rvt-dialog element to make the dialog modal. A modal dialog closes when the user clicks outside the dialog.
data-rvt-dialog-darken-page Add to the root data-rvt-dialog element to darken the page behind the dialog when it is opened.
data-rvt-dialog-disable-page-interaction Add to the root data-rvt-dialog element to disable interaction with the rest of the page while the dialog is open.
data-rvt-dialog-top-left Add to the root data-rvt-dialog element to position the dialog at the top left corner of the screen.
data-rvt-dialog-top-right Add to the root data-rvt-dialog element to position the dialog at the top right corner of the screen.
data-rvt-dialog-bottom-left Add to the root data-rvt-dialog element to position the dialog at the bottom left corner of the screen.
data-rvt-dialog-bottom-right Add to the root data-rvt-dialog element to position the dialog at the bottom right corner of the screen.
data-rvt-dialog-mount Add to a div element that is the first and only child of the body. Dialogs will be moved to be the first children of this div element on page load.

Usage #

  • Both a trigger button and dialog element are (usually) required. A dialog requires both a trigger button with the data-rvt-dialog-trigger attribute and a div element with the data-rvt-dialog attribute. The value of the data-rvt-dialog-trigger attribute must match the id of the associated dialog. See the code examples on this page for guidance. Exceptions: You can omit the trigger button if you are using the data-rvt-dialog-open-on-init attribute or if the dialog is only triggered via JavaScript.
  • Dialog HTML can appear anywhere in the DOM. You can put the element with the data-rvt-modal attribute anywhere in the DOM, including right after the trigger button’s markup. For accessibility reasons, the dialog element is moved via JavaScript to be the first child of the body element (or the element with the data-rvt-dialog-mount attribute).
  • Dialog headers are optional. You can omit the element with the .rvt-dialog__header class if you don’t need it.
  • Action buttons are optional. You can omit the element with the .rvt-dialog__controls class if you don’t need to use action buttons.

Do

  • Use when you need to create a focused space for users to complete a small subtask
  • Use to interrupt the user's workflow when you need to confirm a destructive action
  • Use to present the user with important notifications
  • Keep dialog text brief
  • Put a dialog's primary action button first if using more than one button

Don't

  • Use only to save space on a page
  • Use to show an error message—use an alert instead
  • Display large amounts of information about multiple tasks
  • Require confirmation for routine or non-destructive actions
  • Use more than 3 action buttons
  • Choose action button colors for purely aesthetic reasons—use the color variant that matches the situation
  • Add the data-rvt-dialog-mount attribute to an element other than a div that is the first and only child of body

Accessibility #

Keyboard navigation #

Keys Description
enter or space Open the associated closed dialog when focus is on a trigger button.
tab Move focus to the next focusable element. If focus is on the last focusable element inside the dialog, move focus to the first focusable element inside the dialog. Tabbing should never move focus outside the dialog while it is open.
shift + tab Move focus to the previous focusable element. If focus is on the first focusable element inside the dialog, move focus to the last focusable element inside the dialog. Tabbing should never move focus outside the dialog while it is open.
escape Close the dialog if it has the data-rvt-dialog-modal attribute.

JavaScript #

  • Select the dialog element, not the trigger button. The methods described below are attached to the element with the data-rvt-dialog attribute.
  • A trigger button is optional if you are using JavaScript to show the dialog. There are situations where a dialog is only triggered using JavaScript, such as a warning dialog that appears just before a session times out. In these cases, you can omit the trigger button. Make sure to return the user’s focus to a sensible place after calling the close() method.
  • Only add the mount attribute to the first and only child of the document body. The data-rvt-dialog-mount attribute is intended to help developers using frontend frameworks that render all page content in a single top-level wrapper element. Adding the data-rvt-dialog-mount attribute to an element other than the first and only child of body may cause accessibility issues.
Method Description
open() Opens the dialog
close() Closes the dialog
focusTrigger() Sets focus to the dialog's associated trigger button
focusDialog() Sets focus to the dialog element
Event Description Detail object properties
rvtDialogOpened Emitted when a dialog is opened —
rvtDialogClosed Emitted when a dialog is closed —

Learn more about using Rivet JavaScript