Skip to main content

Use dialog containers for modals and popovers

Learn what your team can do with the shared dialog component to create consistent modals and correctly layered popovers in the app.

Audience

This guide is designed for project manager.

Steps​

Step 1: Open a modal dialog with consistent layout​

Your team can use the shared dialog component to open modal windows with a standard header, body and close action, ensuring a consistent look and feel across the app.

Open a modal dialog with consistent layout

Step 2: Control whether a dialog is open or closed​

Developers can wire the dialog to application state so it opens and closes in response to user actions, such as clicking buttons or completing workflows, giving users clear, predictable interactions.

Control whether a dialog is open or closed

Step 3: Add descriptive titles and supporting text​

Each dialog can be configured with a clear title and optional description so users immediately understand the purpose of the modal and what decision or action is required.

Add descriptive titles and supporting text

Step 4: Choose the appropriate dialog size for the content​

The component supports multiple width options, allowing your team to match the dialog size to the complexity of the content, from compact messages to data-rich layouts.

Choose the appropriate dialog size for the content

Step 5: Make dialogs full-screen on mobile for better usability​

For smaller screens, the dialog can be configured to expand to full-screen, giving mobile users more space to review information and complete tasks without awkward scrolling.

Make dialogs full-screen on mobile for better usability

Step 6: Ensure dropdowns and pickers render correctly inside dialogs​

The dialog exposes a shared content container so dropdowns, pickers and searchable selects open above the modal content without being cut off, preserving smooth, accessible interactions.

Ensure dropdowns and pickers render correctly inside dialogs

Last updated: 2026-07-29