Dialog

A modal overlay that requires user interaction before returning to the main content.

Import

tsx

import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@tac-ui/web';

Default

A standard confirmation dialog with header, description, and footer action buttons. Closes on backdrop click or Escape key.

tsx

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

<Button onClick={() => setOpen(true)}>Open Dialog</Button>
<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogHeader>
    <DialogTitle>Are you absolutely sure?</DialogTitle>
    <DialogDescription>
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="destructive" onClick={() => setOpen(false)}>Delete Account</Button>
  </DialogFooter>
</Dialog>

Without Backdrop

Set backdrop={false} to hide the dark overlay. The dialog still closes on Escape and focus is still trapped.

tsx

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

<Button variant="outline" onClick={() => setOpen(true)}>Open Without Backdrop</Button>
<Dialog open={open} onClose={() => setOpen(false)} backdrop={false}>
  <DialogHeader>
    <DialogTitle>No Backdrop</DialogTitle>
    <DialogDescription>
      This dialog has no backdrop overlay.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Close</Button>
  </DialogFooter>
</Dialog>

API Reference

Dialog props. Subcomponents (DialogHeader, DialogTitle, DialogDescription, DialogFooter) all accept standard HTML div/heading/paragraph attributes plus className.

Prop	Type	Default	Description
open	boolean	false	Controls whether the dialog is visible.
onClose	() => void	-	Callback fired when the dialog should close (backdrop click or Escape key).
backdrop	boolean	true	When false, the dark backdrop overlay is hidden.
layoutId	string	-	Optional Framer Motion layoutId for shared layout morphing animations.
children	React.ReactNode	-	Compose with DialogHeader, DialogTitle, DialogDescription, DialogFooter.
className	string	-	Additional CSS class names applied to the dialog panel.