Components

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>...</AlertDialogContent></AlertDialogRoot>

Notes

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