Dialog

Focus attention on a task in a modal layer.

Live example

A reviewed public example, isolated from this page.

import { Dialog } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

close<button>
Native button by default; requests a cancellable close-press state change and supports safe non-button composition.
Uses native semantics
content<dialog>
Native-only <dialog>, also exported as Dialog.Popup. Lazily mounts, animates in and out on the top layer, supports explicit initial/final focus, and prevents overflow in centered and logical inline-start/inline-end sheet layouts.
ARIA role: dialog
description<p>
Optional supporting text registered without a dangling aria-describedby reference; multiple descriptions are combined in DOM order.
Uses native semantics
title<h2>
Heading registered as the dialog name and available as the APG static focus fallback for long or non-interactive content.
Uses native semantics
trigger<button>
Native button by default; supports multiple invokers, tracks the active trigger, and safely composes to a non-button host.
Uses native semantics