Dialog Box

A Dialog Box interrupts app processing to prompt a user to confirm an action or acknowledge a piece of information. It displays information along with a set of buttons allowing users to “Accept or Cancel” the actions presented within the Dialog Box.

A working example of the Dialog Box can be seen in the Astro Component Demo

Rules of Thumb

  • Use a Dialog Box to:
    • Ask users to confirm irreversible, destructive or expensive actions.
    • Notify the user of an urgent event.
  • Use buttons within a Dialog Box to confirm or cancel actions. Avoid using links or other components.
  • Use clearly titled action buttons to exit a Dialog Box. Don’t use a “close box.”
  • Title buttons by choosing a verb that describes its action.
  • Use Dialog Boxes sparingly as they interrupt critical workflow.
  • Dialog Box text should be clearly written, brief and actionable.

Examples

modal do

modal do

Do: Use buttons within a Dialog Box to confirm or cancel actions.

modal dont

modal dont

Don’t: Use links or other components to confirm or cancel actions.

×