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/native';

Default

A standard confirmation dialog with header, description, and footer action buttons. Closes on backdrop press.

Dialog is an overlay component. Trigger it by controlling the open prop with state.

tsx

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

<Button onPress={() => 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" onPress={() => setOpen(false)}>Cancel</Button>
    <Button variant="destructive" onPress={() => setOpen(false)}>Delete Account</Button>
  </DialogFooter>
</Dialog>

Without Backdrop

Set backdrop="transparent" to hide the overlay. The dialog still closes on outside press and focus remains trapped.

tsx

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

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

API Reference

Dialog props. Subcomponents (DialogHeader, DialogTitle, DialogDescription, DialogFooter) all accept standard ViewProps and children.

Prop	Type	Default	Description
open	boolean	false	Controls whether the dialog is visible.
onClose	() => void	-	Called when the backdrop is pressed or the dialog requests close.
backdrop	"opaque" \| "blur" \| "transparent"	"opaque"	Visual style of the backdrop behind the dialog.
children	React.ReactNode	-	Compose with DialogHeader, DialogTitle, DialogDescription, DialogFooter.

Sub-components:

Prop	Type	Default	Description
DialogHeader	ViewProps	-	Container for title and description with centered alignment.
DialogTitle	ViewProps & { children }	-	Semibold centered title text.
DialogDescription	ViewProps & { children }	-	Muted centered description text.
DialogFooter	ViewProps	-	Action row with right-aligned buttons and top border.