Dialog

Modal overlay that requires user attention before returning to the page. Built on Radix UI.

Default

A basic dialog triggered by a button.

Confirmation

A confirmation dialog with explicit close actions.

Installation

npx visor add dialog

This copies two files into your project:

components/ui/dialog/dialog.tsx — the component
components/ui/dialog/dialog.module.css — the styles

Usage

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription,
} from '@/components/ui/dialog/dialog';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description text.</DialogDescription>
    </DialogHeader>
    {/* content */}
  </DialogContent>
</Dialog>

API Reference

DialogProps

No props data available for “dialog”.

Sub-components

Component	Element	Purpose
`Dialog`	-- (Radix Root)	Root component managing open/close state.
`DialogTrigger`	`<button>`	Element that opens the dialog on click.
`DialogContent`	`<div>` (portal)	The modal panel with overlay, close button, and animations.
`DialogHeader`	`<div>`	Container for title and description at the top.
`DialogTitle`	`<h2>`	Accessible dialog heading.
`DialogDescription`	`<p>`	Secondary text describing the dialog purpose.
`DialogClose`	`<button>`	Explicit close trigger (in addition to the built-in X button).
`DialogOverlay`	`<div>`	Background overlay behind the dialog.
`DialogPortal`	--	Portal wrapper for rendering outside the DOM tree.

Accessibility

Built on @radix-ui/react-dialog with full WAI-ARIA dialog semantics.
Focus is trapped inside the dialog while open.
Escape key closes the dialog; clicking the overlay also dismisses it.
DialogTitle is linked via aria-labelledby; DialogDescription via aria-describedby.
Focus returns to the trigger element when the dialog closes.

Dialog

On this page