Dialog

Modal overlay window, wrapping Radix Dialog, with spring scale-in.

Dialog wraps @radix-ui/react-dialog (never re-exported directly): focus trap, Escape to close, backdrop click, and aria-modal semantics come from Radix; srui adds the surface + bg-popover treatment and the animate-scale-in entrance with --ease-spring.

Installation

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from "@iammikz/srui";

Usage

Props

Export	Notes
`Dialog`	Root; Radix `open`/`onOpenChange` for controlled use
`DialogTrigger`	Button that opens the dialog (`asChild` supported)
`DialogClose`	Button that closes it
`DialogContent`	The panel; `showCloseButton?: boolean` (default `true`), plus Radix Content props
`DialogHeader` / `DialogFooter`	Layout slots
`DialogTitle` / `DialogDescription`	Required for screen readers (Radix warns if missing)

Examples

Without the default close button

Accessibility

Radix provides the focus trap, aria-modal, and labelled-by wiring; always include DialogTitle (and ideally DialogDescription).
Escape closes; Tab cycles within the dialog; focus returns to the trigger on close.
Entrance animation is motion-safe:-gated — reduced-motion users get an instant dialog with no stuck mid-scale state.