Overlays

Dialog

A blocking task on top of the page: a short form, a review, a decision.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@flinbu/seed";

A short form

The confirm button repeats the title's verb; Cancel is always Cancel.

import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Field, Input } from "@flinbu/seed";

<Dialog>
  <DialogTrigger asChild><Button>Rename token</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename token</DialogTitle>
      <DialogDescription>14 components use bg-accent-solid. They all follow the new name.</DialogDescription>
    </DialogHeader>
    <Field label="Name" hint="Lowercase, with dashes."><Input defaultValue="bg-accent-solid" /></Field>
    <DialogFooter>
      <DialogClose asChild><Button variant="tertiary">Cancel</Button></DialogClose>
      <Button>Rename</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Use it for

Tasks that need focus and finish in one step.

Use something else for

Long flows: use a page.
Information people need while working: use a Popover or the page.

Props

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	–	Controlled or initial state.
`onOpenChange`	`(open: boolean) => void`	–	Called on open and close.
`DialogContent: size`	`'sm''md''lg'`	`'md'`	384, 512 or 672 px wide.
`DialogContent: hideClose`	`boolean`	–	Hides the close button; keep a Cancel button.
`DialogContent: closeLabel`	`string`	`'Close'`	Accessible name of the close button.

Accessibility

Built on Radix Dialog: focus moves in and is trapped, Escape closes, focus returns to the trigger.
DialogTitle names it and DialogDescription describes it.