Dialog

Modal overlays on Base UI's Dialog: backdrop, focus trap, Escape to close, and return-focus built in. Compose with Trigger, Content, Title, Description, Close.

Confirmation

Usage

<Dialog>
  <DialogTrigger render={<Button variant="danger" />}>
    Delete project
  </DialogTrigger>
  <DialogContent>
    <DialogTitle>Delete “Marketing site”?</DialogTitle>
    <DialogDescription>…</DialogDescription>
    <DialogFooter>
      <DialogClose render={<Button variant="secondary" />}>
        Cancel
      </DialogClose>
      <Button variant="danger">Delete project</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>