Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · dialog

Native dialog

Opt-in styles for native modal and non-modal dialogs with application-owned lifecycle.

Install with npx @madojs/ui@latest add dialog.

Primitive

Native dialog

Unsaved invoice changes

Review an interrupting decision without replacing the browser's modal, focus or keyboard behavior.

Background action

Discard invoice changes?

Status, total and note edits for the current invoice have not been saved.

Discarding returns to the last saved invoice snapshot. This action cannot restore the current edits.

No dialog decision has been made.

Composition

  • Style a native dialog and open it with showModal() for modal work or show() for a non-modal surface. Keep forms and close policy in application code.

Public API

element dialog
Browser-owned modal or non-modal dialog lifecycle.
class mado-ui-dialog
Dialog frame and backdrop treatment.
class mado-ui-dialog-header / content / actions
Optional structural regions with application-owned headings and controls.
attribute data-size
Optional compact or wide surface size.

Detected public classes

  • .mado-ui-dialog
  • .mado-ui-dialog-actions
  • .mado-ui-dialog-content
  • .mado-ui-dialog-description
  • .mado-ui-dialog-header
  • .mado-ui-dialog-title

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-dialog-actions-gap
  • --mado-ui-dialog-actions-justify
  • --mado-ui-dialog-backdrop
  • --mado-ui-dialog-background
  • --mado-ui-dialog-border
  • --mado-ui-dialog-color
  • --mado-ui-dialog-content-gap
  • --mado-ui-dialog-description-color
  • --mado-ui-dialog-gap
  • --mado-ui-dialog-header-gap
  • --mado-ui-dialog-inline-size
  • --mado-ui-dialog-max-block-size
  • --mado-ui-dialog-padding
  • --mado-ui-dialog-radius
  • --mado-ui-dialog-shadow
  • --mado-ui-radius-md
  • --mado-ui-shadow-panel
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-5

Accessibility contract

  • Supply an accessible name with aria-labelledby or aria-label and keep one visible heading.
  • Native showModal(), Escape, backdrop modality and method="dialog" behavior stay browser-owned.

Keyboard

  • Tab follows native modal containment; Escape requests close unless the application cancels it.

Focus

  • Choose initial and return focus in the application when native defaults do not match the workflow.

Fallback

  • Without the stylesheet, native dialog semantics and close behavior remain available.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.