Dialog

Dialog opens a focused layer above the current page for short tasks, supporting information, and decisions that are safe to dismiss.

Use it when a task benefits from keeping the surrounding page visible but temporarily inactive. For consequential decisions that require explicit confirmation, use Alert Dialog instead.

Live previewInteractive / Local

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/dialog.json

Usage

Sourcetsx

import { Button } from "@/components/ui/argv/button"
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger
} from "@/components/ui/argv/dialog"

<Dialog>
    <DialogTrigger render={<Button />}>Edit target</DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Edit target</DialogTitle>
            <DialogDescription>
                Change where the next release will be deployed.
            </DialogDescription>
        </DialogHeader>
        <div>Dialog content</div>
        <DialogFooter>
            <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
            <Button>Save target</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Composition

Sourcetext

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    ├── Content
    └── DialogFooter
        └── DialogClose

DialogContent automatically renders inside DialogPortal with DialogOverlay. It also includes a labeled close control by default. Set showCloseButton={false} when the dialog provides another clear dismissal action.

Use size="sm" for compact messages, the default size for forms and detail views, and size="lg" for wider structured content. Keep the task short enough that users do not lose the context of the underlying page.

API Reference

Dialog

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	-
`onOpenChange`	`(open: boolean, eventDetails) => void`	-
`modal`	`boolean`	`true`

DialogTrigger

Prop	Type	Default
`render`	`ReactElement` \| `function`	`button`

DialogContent

Prop	Type	Default
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`
`showCloseButton`	`boolean`	`true`
`className`	`string`	-

DialogFooter

Prop	Type	Default
`showCloseButton`	`boolean`	`false`
`className`	`string`	-

DialogClose, DialogOverlay, and DialogPortal forward their corresponding Base UI primitive props. DialogHeader forwards native div props. DialogTitle and DialogDescription forward the corresponding title and description primitive props.

Accessibility

Always provide a DialogTitle. Add DialogDescription when users need context beyond the title; keep it concise and connect visible form labels to their controls.

Base UI traps focus while a modal dialog is open, closes on Escape, and returns focus to the trigger after dismissal. Do not place a dialog inside another dialog unless the second layer is essential to completing the first task.