Modal

stable

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

OverlaysInteractive/Storybook ↗

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

Loading demo…

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`size`	`"default" \| "sm" \| "lg" \| "xl" \| "full"`	"default"	ModalContent width preset
`showCloseButton`	`boolean`	true	Show close button in corner
`title`req	`string`	—	ConfirmModal heading
`description`	`string`	—	ConfirmModal body text
`confirmLabel`	`string`	"Confirm"	ConfirmModal confirm button text
`cancelLabel`	`string`	"Cancel"	ConfirmModal cancel button text
`variant`	`"default" \| "destructive"`	"default"	ConfirmModal visual tone
`onConfirm`req	`() => void`	—	ConfirmModal confirm callback

open

Type booleanDefault —

Controlled open state

onOpenChange

Type (open: boolean) => voidDefault —

Called when open state changes

size

Type "default" | "sm" | "lg" | "xl" | "full"Default "default"

ModalContent width preset

showCloseButton

Type booleanDefault true

Show close button in corner

titlerequired

Type stringDefault —

ConfirmModal heading

description

Type stringDefault —

ConfirmModal body text

confirmLabel

Type stringDefault "Confirm"

ConfirmModal confirm button text

cancelLabel

Type stringDefault "Cancel"

ConfirmModal cancel button text

variant

Type "default" | "destructive"Default "default"

ConfirmModal visual tone

onConfirmrequired

Type () => voidDefault —

ConfirmModal confirm callback

Metadatasemantic type border surface

MobileTouch Target

Full-screen on mobile. All interactive controls inside the modal (buttons, close) must meet 44px minimum.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Dialog→

Modal dialog with Radix focus management and close on escape

AlertDialog→

Confirmation dialog requiring explicit user action

Was this helpful?