Modal

Focused dialog for confirmations and alerts that require user attention.

Delete file?

This action cannot be undone.

Deleting this file permanently removes it from your workspace.

Open Modal Playground

Options

PropertyValuesDefault
variantconfirmation / alertconfirmation
sizes / m / lm
dismissibletrue / falsetrue
opentrue / falsefalse

Behaviors

  • Backdrop overlay blocks page interaction while open.
  • Focus is trapped inside the modal while open.
  • Dismissible modals close on backdrop click, Escape, or close button.
  • Non-dismissible modals require an explicit primary action.

Accessibility

  • Uses the native <dialog> element with showModal() for built-in accessibility.
  • Focus is automatically trapped inside the dialog by the browser.
  • aria-labelledby and optional aria-describedby connect title and description.
  • Escape key dismisses via the native cancel event (when dismissible).
  • Background content is made inert automatically by the browser.