Dialogs

A dialog box is a window that pops up on the screen with options that the user can select.

A dialog box is a window that pops up on the screen with options that the user can select. After the selections have been made, the user can typically confirm or discard changes.

For dialogs with relatively simple content, place buttons on the right side of a dialog, with the affirmative button to the right of the dismissive button.

For lengthy or complex forms, place buttons on the left of the form, with the affirmative button to the left of the dismissive button.

Learn more

To learn more visit Bootstrap's Modals documentation.

Basic

Streamlined, flexible, modal dialog prompt with minimum required functionality and smart defaults. Includes header, body, and set of actions in the footer.

Reference: Adapted from https://getbootstrap.com/docs/4.0/components/modal/#modal-components

Show a modal dialog

Modal title

Modal body...

Action Labeling

Dialog action labels should describe the actions being presented to the user.

Do

For example, if the user is being prompted to save their changes. Offer Save Changes and Discard actions.

Modal title

Modal body...

Don't

Do not describe the actions in the body of the modal and then ask the user to select OK or Cancel.

Modal title

Save changes before closing?

Third-party Content Disclaimer