Overlays

Dialog

Decisions and short tasks that block the page.

@codeways/ui/dialog

Sizes

Decisions and short tasks (<= 5 fields) that must finish before work continues.

Usage

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "@codeways/ui/dialog";

<Dialog>
  <DialogTrigger asChild><Button variant="secondary">Rename</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename project</DialogTitle>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
      <Button variant="primary">Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>