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:

npx nocta-ui add dialog

Import the components you need:

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

Examples

Simple Dialog

Dialog with Actions

Sizes

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

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
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Trigger content

DialogContent

The dialog modal content.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \|` 'md'`	Dialog size
`showClose`	`boolean`	`true`	Show close button
`portal`	`boolean`	`true`	Render the dialog in a React portal
`className`	`string`	`''`	Additional CSS classes to apply
`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
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Close button content

DialogHeader

Container for the title and description.

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Header content

DialogTitle

Accessible heading for the dialog.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'h2'`	Optional element type for the heading
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Title content

DialogDescription

Accessible description for the dialog.

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Description content

DialogFooter

Footer container, typically for actions.

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Footer content

DialogActions

Layout container for action buttons.

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes to apply
`children`	`React.ReactNode`	-	Actions content

Dialog

On this page