Overlays
Dialog
Radix-backed modal dialog with a trigger, portalled panel and built-in close button.
A modal dialog built on Radix Dialog — a composed family of parts that renders a portalled, focus-trapped, keyboard-accessible panel over a dimmed, blurred backdrop. DialogContent includes the overlay and a built-in close button. Drive it with a DialogTrigger, or control it yourself with open/onOpenChange.
Import
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose,
} from "@yuhuanowo/yunui";
Basic
Dialog
Parts
| Part | Role |
|---|---|
Dialog | Root; holds open/onOpenChange (or runs uncontrolled). |
DialogTrigger | Element that opens the dialog (use asChild to wrap a Button). |
DialogContent | Portalled, centered panel — includes the overlay and a built-in close button. |
DialogHeader | Layout block for the title and description. |
DialogTitle | Accessible title that labels the dialog for screen readers. |
DialogDescription | Supplementary text under the title. |
DialogFooter | Right-aligned row for action buttons. |
DialogClose | Element that closes the dialog when activated. |
Dialog re-exports Radix Dialog parts with design-system styling. See the Radix Dialog docs for the complete prop reference, including DialogPortal and DialogOverlay.