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.
<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></svg>
</button>
</div>
<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></svg>
</button>
</div>
<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>
<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></svg>
</button>
</div>
<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></svg>
</button>
</div>
<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>
Elements #
Element | Description | Usage | Required | Multiple |
---|---|---|---|---|
Trigger button | Button that opens the dialog when interacted with | Limit button text to a few words |
Trigger button is optional |
Component may contain only one Trigger button |
Title | Title appearing at the top of the opened dialog | Limit to a short phrase. Should be an accurate summary of the dialog's content. |
Title is optional |
Component may contain only one Title |
Content | Text content of the opened dialog | Limit to a few short sentences. Avoid complex formatting, images, or tables. |
Content is required |
Component may contain only one Content |
Action button | Button appearing after the content of the opened dialog | Do not use more than two action buttons. Limit button text to 1-2 words. Aim for verbs, such as Confirm or Cancel . |
Action button is optional |
Component may contain multiple Action button |
Close button | Button that allows the user to close the dialog | Do not allow users to close confirmation dialogs—these require the user to interact with one of the action buttons. Do not use an icon other than the "X" icon provided in the example markup. |
Close button is optional |
Component may contain only one Close button |
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 thedata-rvt-dialog-trigger
attribute and adiv
element with thedata-rvt-dialog
attribute. The value of thedata-rvt-dialog-trigger
attribute must match theid
of the associated dialog. See the code examples on this page for guidance. Exceptions: You can omit the trigger button if you are using thedata-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 thebody
element (or the element with thedata-rvt-dialog-mount
attribute).
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
- 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
- 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 adiv
that is the first and only child ofbody
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 thedata-rvt-dialog-mount
attribute to an element other than the first and only child ofbody
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 | — |