Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Controlled open state
  • Northstar launch
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Dialog

Focuses a short task above the current page with managed focus.

idle

Usage

import {
	Dialog,
	DialogClose,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogPopup,
	DialogTitle,
	DialogTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Dialog>
	<DialogTrigger />
	<DialogPopup>
		<DialogHeader>
			<DialogTitle />
			<DialogDescription />
		</DialogHeader>
		<DialogFooter>
			<DialogClose />
		</DialogFooter>
	</DialogPopup>
</Dialog>

Examples

Controlled open state

Keep open and onOpenChange together so Escape, dismissal, and application actions share one state.

Northstar launch

Review and edit the details of this project.

Recommendations

GuidancePractice
Do

Give the task a clear title. Keep the main action and cancel action visible and predictable.

Do

DialogTitle names the popup. DialogDescription supplies supporting context. Tab stays within a modal dialog; Escape closes it and returns focus to its trigger.

Do

An uncontrolled composition can live in a Server Component. Use a Client Component for open state and callbacks. Close after a save succeeds, not before.

Usage boundaries

GuidanceBoundary
Scope

Use Alert Dialog for critical confirmation. Move long, multi-step work to a page when the overlay obscures context.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
openbooleanfalseControls whether the dialog is open.
defaultOpenbooleanfalseSets the initial state when the dialog is uncontrolled.
onOpenChange(open: boolean, eventDetails) => void—Receives open-state changes.
DialogTriggerDialogTriggerProps—Opens the dialog; accepts a render target.
DialogPopupDialogPopupProps—Provides the modal popup, backdrop, and viewport; size defaults to md.
sizeDialogSize"md"Selects one of the four popup width presets.
showCloseButtonbooleantrueShows the built-in close button in the popup.
DialogHeaderDialogHeaderProps<div>Groups the title and description.
DialogTitleDialogTitleProps—Names the dialog for assistive technology.
DialogDescriptionDialogDescriptionProps—Provides the dialog's accessible description.
DialogPanelDialogPanelProps<div>Contains the dialog's main content.
DialogFooterDialogFooterProps<div>Groups closing or commit actions.
DialogCloseDialogCloseProps—Closes the dialog; accepts a render target.
PreviousContext MenuNextDrawer