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
  • Project archive
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Alert dialog

Interrupts with critical context and confirms a single action.

idle

Usage

import {
	AlertDialog,
	AlertDialogClose,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogPopup,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@mizen-labs/ui";

Anatomy

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

<AlertDialog>
	<AlertDialogTrigger />
	<AlertDialogPopup>
		<AlertDialogHeader>
			<AlertDialogTitle />
			<AlertDialogDescription />
		</AlertDialogHeader>
		<AlertDialogFooter>
			<AlertDialogClose />
		</AlertDialogFooter>
	</AlertDialogPopup>
</AlertDialog>

Examples

Project archive

Remove a project only after reviewing the confirmation.

Recommendations

GuidancePractice
Do

State the consequence before the confirming action. Name both the action and the safe way to cancel.

Usage boundaries

GuidanceBoundary
Scope

Reserve interruption for consequential decisions. Use Dialog for ordinary editing tasks.

API reference

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

PropTypeDefaultDescription
openbooleanfalseControls whether the alert dialog is open.
defaultOpenbooleanfalseSets the initial state when uncontrolled.
onOpenChange(open: boolean, eventDetails) => void—Receives open-state changes.
AlertDialogTriggerAlertDialogTriggerProps—Opens the alert dialog; accepts a render target.
AlertDialogPopupAlertDialogPopupProps—Provides the modal popup and backdrop.
AlertDialogHeaderAlertDialogHeaderProps<div>Groups the alert title and description.
AlertDialogTitleAlertDialogTitleProps—Names the alert for assistive technology.
AlertDialogDescriptionAlertDialogDescriptionProps—Explains the decision or consequence.
AlertDialogFooterAlertDialogFooterProps<div>Groups the available actions.
AlertDialogCloseAlertDialogCloseProps—Closes the alert dialog; accepts a render target.
PreviousTabsNextCommand