Component

AlertDialog

Compound dialog for destructive or interruptive confirmation.

ReactReact Native5 props

PreviewReact

Imports

import { AlertDialogRoot, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from "@hozorica/hods-react/alert-dialog";

import { AlertDialogRoot, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from "@hozorica/hods-react-native/alert-dialog";

Props

PropTypeDescription

open / defaultOpenbooleanControlled and uncontrolled state.

onOpenChange(open, details) => voidReceives open state and reason.

closeOnEscapebooleanEscape key on web; Android back on RN.

closeOnInteractOutsidebooleanControls outside click/press close.

lazyMount / unmountOnExit / skipAnimationbooleanWeb mount and animation controls.

Platform Support

React

Portal, aria modal semantics, focus trap, escape, outside interaction, mount controls.

React Native

Modal, Android back handling, outside press policy, modal accessibility.

Usage

<AlertDialogRoot><AlertDialogTrigger>Open</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete item?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogAction>Delete</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialogRoot>

Notes

Use AlertDialogTitle and AlertDialogDescription for accessible labelling.
Keep destructive confirmation copy short and specific.