Dialog

containment

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.

Variants

Basic

Default

Standard dialog with headline, content, and actions

Alert

Alert dialog requiring user acknowledgment or decision

Full-screen

Dialog that covers the entire screen on mobile

Properties

Name Type Required Default Description
open boolean - - Whether the dialog is open
type enum - - The type of dialog for accessibility
quick boolean - - Skips opening and closing animations
noFocusTrap boolean - - Disables focus trapping within the dialog
returnValue string - - The value returned when the dialog closes

States

closed

Dialog is not visible

opening

Dialog is animating open

open

Dialog is visible and interactive

closing

Dialog is animating closed

Accessibility

Role: dialog
Keyboard Support:
  • Escape - Close the dialog
  • Tab - Move focus within dialog (trapped by default)
  • Enter - Activate focused button
Screen Reader Notes: Dialog is labelled by headline slot. Use aria-label when no headline is present. Set type="alert" for important messages requiring action.

LLM Context

Intent: Display important information requiring user attention or action
Anti-Patterns:
  • Dialog without headline or aria-label
  • Alert dialog without type="alert"
  • Using dialog for non-interruptive content
  • Multiple stacked dialogs
  • Dialog without clear dismiss action
Example Usage: 
<md-dialog><div slot="headline">Confirm</div><div slot="content">Are you sure?</div><div slot="actions"><md-text-button>Cancel</md-text-button><md-filled-button>Confirm</md-filled-button></div></md-dialog>
<md-dialog type="alert"><div slot="headline">Error</div><div slot="content">Operation failed.</div><div slot="actions"><md-filled-button>OK</md-filled-button></div></md-dialog>