Dialog

stable

Modal dialog with Radix focus management and close on escape

OverlaysInteractive/Storybook ↗

import { Dialog } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`open`req	`boolean`	—	Controlled open state
`onClose`req	`() => void`	—	Called when dialog should close
`title`	`string`	—	Dialog header title
`size`	`"sm" \| "md" \| "lg"`	"md"	Dialog width

openrequired

Type booleanDefault —

Controlled open state

onCloserequired

Type () => voidDefault —

Called when dialog should close

title

Type stringDefault —

Dialog header title

size

Type "sm" | "md" | "lg"Default "md"

Dialog width

MobileTouch Target

Renders full-screen on mobile (<640px) by default. Close button must be ≥44px. Scrollable content uses overflow-y-auto with max-height.

Design Rationale

This component was designed to express:

Confirmation dialog requiring explicit user action

Full-featured modal wrapper with header, body, and footer slots

Was this helpful?