Skip to content

Modal

Updated 2026-05-14

Modals interrupt the current flow to require the user’s attention for a confirmation, input, or critical action. Use them sparingly - overuse degrades their impact.

  • To confirm destructive or irreversible actions. For full confirmation dialog patterns, see confirmation.
  • To collect a small amount of input before completing an action.
  • Do not use modals for purely informational content - use inline messages or tooltips instead.
  • Modal title should match the label of the button or link that triggered it.
  • Keep body copy short and actionable. One to two sentences.
  • Use a primary and secondary button pair. Align with the button terminology guidelines.
  • Do not nest modals.
✓ Do
Title: Delete dataset
✗ Don't
Title: OK
✓ Do
This will permanently delete the dataset and cannot be undone.
✗ Don't
Are you sure you want to do this?
✓ Do
Primary CTA: Delete / Secondary CTA: Cancel
✗ Don't
Primary CTA: Yes / Secondary CTA: No