← Components

Dialog

Focus attention on a bounded task or decision.

States

defaulthoverfocusdisabled

Tokens

background{semantic.surface.primary}
foreground{semantic.text.primary}
border{semantic.border.default}
radius{radius.lg}
padding{space.6}
focusRing{semantic.focus.ring}

Accessibility

{
  "ruleIds": [
    "STYLE-A11Y-001",
    "STYLE-A11Y-011",
    "STYLE-A11Y-012",
    "STYLE-A11Y-013"
  ],
  "focusVisible": true,
  "keyboard": "Escape closes when dismissal is allowed; focus is trapped while open.",
  "focusTrap": true,
  "accessibleNameSource": "visible-title",
  "initialFocus": "inside-dialog",
  "returnFocusToTrigger": true,
  "escapeDismissal": "when-allowed"
}

Do / Don't

Do

  • Return focus to the trigger on close.

Don't

  • Do not open dialogs from dialogs.