Loading…

Dialog

A modal window that interrupts the user to gather a response.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add dialog

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Dialog } from "@/components/ui/dialog";

Examples

Every example the tests run, live and operable, side by side.

Default
Confirmation
Without Close Button
Scrolling Content
Spring

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DialogOverlay>

Every prop of Radix UI’s Dialog.Overlay, plus className.

<DialogContent>

Prop	Type	Default
`animation` How the dialog enters. `default` fades and rises into place. `spring` pops in with a slight overshoot and then brings its sections — header, body, footer — in one after another. Both stop under reduced motion, and both leave the same way.	`"default" \| "spring"`	`"default"`
`showCloseButton` Renders the built-in close button. Turn off to supply your own.	`boolean`	`true`

Every prop of Radix UI’s Dialog.Content, plus className.

<DialogHeader>

Plus every attribute of <div>.

<DialogFooter>

Plus every attribute of <div>.

<DialogTitle>

Every prop of Radix UI’s Dialog.Title, plus className.

<DialogDescription>

Every prop of Radix UI’s Dialog.Description, plus className.

Accessibility

Focus is trapped while open and restored to the trigger on close; Escape and an overlay click dismiss. Always render a DialogTitle — it names the dialog for screen readers. Use DialogDescription, or aria-describedby, to explain consequential actions. The optional spring entrance and section stagger stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

animation

How the dialog enters. default fades and rises into place. spring pops in with a slight overshoot and then brings its sections — header, body, footer — in one after another. Both stop under reduced motion, and both leave the same way.

"default" | "spring"

"default"

showCloseButton

Renders the built-in close button. Turn off to supply your own.

boolean

true