Dialog

An accessible modal dialog component with backdrop overlay, focus trapping, and Escape key dismissal. Uses compound sub-components for structured header, title, description, and footer sections.

Import

import {
  Dialog,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@wavebooking/aqua-fusion';

Preview

Usage

const [open, setOpen] = useState(false);

<>
  <Button onClick={() => setOpen(true)}>Open Dialog</Button>
  <Dialog open={open} onClose={() => setOpen(false)}>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed? This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button onClick={() => setOpen(false)}>Confirm</Button>
    </DialogFooter>
  </Dialog>
</>

Props

Dialog

DialogHeader

DialogTitle

DialogDescription

DialogFooter