Dialog

A modal dialog component for displaying content over the main interface with backdrop, keyboard navigation and accessibility features

Installation

Install the Dialog component using the nocta-ui CLI:

Terminal

npx nocta-ui add dialog

Then import the components you need:

Import

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

Basic Usage

Simple Dialog

Dialog with Actions

Sizes

The Dialog component supports different sizes: sm, md, lg, xl, and full. The default size is md.

Form Dialog

Customization

Custom Styling

The Dialog components accept a className prop for custom styling:

Custom Dialog Styling

<DialogContent className="border-2 border-blue-200 dark:border-blue-800">
  <DialogHeader className="bg-blue-50 dark:bg-blue-900/20">
    <DialogTitle className="text-blue-900 dark:text-blue-100">
      Custom Styled Dialog
    </DialogTitle>
  </DialogHeader>
</DialogContent>

Without Close Button

Controlled Dialog

For programmatic control, you can use the open and onOpenChange props:

Controlled Dialog

const [open, setOpen] = useState(false);

return (
  <Dialog open={open} onOpenChange={setOpen}>
    <DialogTrigger asChild>
      <Button>Open Controlled Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Controlled Dialog</DialogTitle>
        <DialogDescription>
          This dialog is controlled by React state.
        </DialogDescription>
      </DialogHeader>
      <div className="px-6 py-4">
        <Button onClick={() => setOpen(false)}>
          Close Programmatically
        </Button>
      </div>
    </DialogContent>
  </Dialog>
);

Accessibility Features

The Dialog component includes comprehensive accessibility features:

ARIA attributes: Proper role, aria-modal, and aria-labelledby attributes
Focus management: Focus is trapped within the dialog when open
Keyboard navigation:
- Escape key closes the dialog
- Tab cycles through focusable elements
Screen reader support: Proper announcement of dialog content
Backdrop interaction: Clicking outside closes the dialog

API Reference

The root component that manages dialog state.

Prop	Type	Default	Description
`open`	`boolean`	`undefined`	Controls the dialog state
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback when dialog state changes
`children`	`React.ReactNode`	-	Dialog content

DialogTrigger

Button that opens the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Trigger content

DialogContent

The dialog modal content.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Dialog size
`showClose`	`boolean`	`true`	Show close button
`children`	`React.ReactNode`	-	Dialog content

DialogClose

Button that closes the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Close button content

Dialog

On this page