Dialog
Focus-trapped dialog surfaces with five placements.
Contract
| Axis | Values | Default |
|---|---|---|
placement on Popup | middle, top, bottom, start, end | middle |
modal on Root | focus trap and scroll lock when true | true |
| state | controlled open or uncontrolled defaultOpen | closed |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/dialog.css';Scroll inside the code area to read long lines.
Imports
import { TRDialog } from '@tinyrack/ui/components/dialog';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Placements permalink
Use the same compound structure and change only popup placement.
Detached trigger handle permalink
A stable handle connects a trigger and root that do not share an ancestor while Viewport owns mobile containment.
Long modal task with a form permalink
The modal traps focus while open, keeps long content inside the viewport, submits a real form, and restores focus to Open dialog after dismissal.
API
Base UI owns focus trapping, scroll lock, portal, backdrop interaction, restoration, and Escape dismissal. Popup uses one responsive width recipe across all placements. Put long task content in a tr-dialog-body container between Description and the action row so the popup's minmax(0, 1fr) body scrolls while its title and actions remain visible.
| Public API | Purpose |
|---|---|
TRDialog.Root / TRDialogRoot | Owns controlled open, uncontrolled defaultOpen, modality, dismissal, and optional handle payload state. |
TRDialog.Trigger / TRDialogTrigger | Opens the root, or a detached root when given a handle and optional payload. |
TRDialog.Portal / TRDialogPortal | Moves the layer to document.body or a custom container. |
TRDialog.Backdrop / TRDialogBackdrop | Provides the modal scrim and outside-press target. |
TRDialog.Viewport / TRDialogViewport | Contains long and mobile dialog layouts. |
TRDialog.Popup / TRDialogPopup | Renders the named dialog, accepts initialFocus, finalFocus, and Tinyrack placement. |
TRDialog.Title / TRDialogTitle | Supplies the accessible name. |
TRDialog.Description / TRDialogDescription | Supplies the accessible description. |
TRDialog.Close / TRDialogClose | Closes the active dialog and restores focus. |
TRDialog.createHandle, createDialogHandle, TRDialogHandle<Payload> | Connect detached triggers, imperative open/close calls, and typed payloads. |
Use modal={false} when outside interaction must remain available, or modal="trap-focus" to trap focus without scroll lock. disablePointerDismissal keeps outside presses from closing the dialog. All parts preserve refs, render, event handlers, classes, styles, and native attributes. Closed portals are SSR-safe and default-open portals hydrate without changing the public structure.