Dialog

[smockle]

Requires #1061

Description

A dialog is a type of overlay that can be used for confirming actions, asking for disambiguation, and presenting small forms. They generally allow the user to focus on a quick task without having to navigate to a different page.

Dialogs appear in the page after a direct user interaction. Don't show dialogs on page load or as system alerts.

Dialogs appear centered in the page, with a visible backdrop that dims the rest of the window for focus.

All dialogs should have a title and a close button. Use an overlay header to compose these required elements.

Dialogs are modal. Dialogs can be dismissed by clicking on the close button, or by interacting with another button in the overlay. To avoid losing information and missing important messages, clicking outside of the dialog will not close it.

Make sure larger dialogs remain mobile-friendly. Even large dialogs need to be responsive. A dialog's width and height will be readjusted depending on the screen size and should never exceed the available space. Use responsive solutions to adjust the UI so they behave well on smaller screens.

Simple and small dialogs can remain as-is on mobile. As more elements are added to it, mobile-specific style variations such as Bottom sheet and Full-screen should be considered.

Resources

Figma:
Prototype:

Screenshot

Components

Dialog

Behaviors

• No body scrolling when dialog is active.

• Display a browser confirmation dialog when leaving tab or updating history state when dialog contains unsaved data (e.g. changed form fields).

Props

name: width
type: "auto" | 296 | 320 | 480 | 640 (px)
default: "auto"
description:

---

name: height
type: "auto" | 480 | 640
default: "auto"
description:

ConfirmationDialog

Screenshot

Composes

• Overlay header (size: large, closeButton)
• Overlay footer (any type)

Props

name: title
type: string
default: undefined
description:

---

name: description
type: string
default: undefined
description: