Dialog

This example does not save any data.

Anatomy

Part	Purpose
Title	Names the task or decision and provides the accessible name.
Description and content	Explain what the user needs to review.
Actions	Provide an explicit confirm or cancel choice.
Close control	Dismisses the dialog when dismissible is enabled.

Options

Attribute	Default	Purpose
`title`	Empty	Visible title; supply a meaningful name.
`description`	Empty	Optional supporting text.
`dismissible`	`true`	Set to `false` to prevent cancellation and Escape dismissal.
`open`	Absent	Presence opens the modal. Remove it to close.
`confirm-label`	Confirm	Label for the primary action.
`cancel-label`	Cancel	Label for the cancellation action.

Usage

Use Dialog for a task or decision that temporarily requires the user's attention. Use inline content for information that does not need to block the current flow.

<uif-dialog title="Save your changes?" confirm-label="Save changes">
  <p>Review your changes before continuing.</p>
</uif-dialog>

The example above shows the element's markup. Opening it requires registration and an explicit trigger. Your application handles the confirm event and decides when to close the dialog.

Keyboard interactions

Key	Behavior
Tab / Shift + Tab	Move between focusable controls inside the modal.
Escape	Close when dismissible is enabled.
Enter / Space on an action	Activate the focused button.

Behavior

Opening uses native showModal().
A dismissible Dialog closes through the explicit close control or Escape.
Backdrop clicks do not dismiss the Dialog.
Confirm emits uif-dialog-confirm and does not force close.
Cancel emits uif-dialog-cancel and closes a dismissible Dialog.
Closing emits uif-dialog-close.
Browser Back/history behavior belongs to the embedding application.
Dialog does not define Alert, S/M/L, or density variants.

Accessibility

Every Dialog requires an accessible name through its visible title.
A concise description is associated with aria-describedby when provided.
Native modal behavior provides top-layer presentation, background inertness, and focus containment.
Focus returns to the invoking control when it still exists and can receive focus.
If the invoker is removed or disabled, the consumer decides the appropriate fallback focus target.

Composition

Alert is a separate reusable component. Place Alert inside Dialog when the flow needs warning, error, or status messaging; do not convert Dialog itself into an alert variant.

Theming

Dialog combines its surface styles with Button patterns for its actions. Use the brand and scheme switches in the preview to inspect those contexts.

Integration

import "ui-foundations/elements";

const dialog = document.querySelector("uif-dialog");
const trigger = document.querySelector("#open-dialog");
trigger.addEventListener("click", () => dialog.setAttribute("open", ""));
dialog.addEventListener("uif-dialog-confirm", () => {
  // Save or validate in your application, then close when appropriate.
  dialog.removeAttribute("open");
});

Provide a button with id="open-dialog" for this example. Confirm does not close a dialog automatically, so validation can keep it open when necessary.