Overlays

Dialog

Modal surfaces with backdrop and focus management.

Modal dialog

Fades its backdrop and scales in — pure Base UI, no animation lib.

import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from "@/components/ui";

<Dialog>
  <DialogTrigger render={<Button>Open dialog</Button>} />
  <DialogContent>
    <DialogTitle>Launch to Spira</DialogTitle>
    <DialogDescription>
      This dialog manages focus and the backdrop for you.
    </DialogDescription>
    <DialogFooter>
      <DialogClose render={<Button variant="ghost">Cancel</Button>} />
      <DialogClose render={<Button>Confirm</Button>} />
    </DialogFooter>
  </DialogContent>
</Dialog>