Dialog

The modal dialog.

A modal centred on the screen. For one that slides in from the edge use Sheet; for a light bubble use Popover.

export const client = "only";

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

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>エクスポート</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>CSV をエクスポート</DialogTitle>
          <DialogDescription>
            いま適用しているフィルタの結果だけが出力されます。
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>キャンセル</DialogClose>
          <Button>ダウンロード</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  DialogOverlay,
  DialogPortal,
} from "@squadbase/vantage/ui";

Parts

Part	Role
`Dialog`	The state: `open` / `defaultOpen` / `onOpenChange`
`DialogTrigger`	What opens it; `render` turns it into a button
`DialogContent`	The panel. `showCloseButton` (default `true`) toggles the ×
`DialogHeader` / `DialogTitle` / `DialogDescription`	The heading block
`DialogFooter`	The button row; `showCloseButton` adds a close button
`DialogClose`	Anything that closes it

DialogTitle is required for assistive technology. If you don’t want it visible, keep it and add className="sr-only".

Opening without a trigger

To open from code — after a form submit, say — own the open state yourself.

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

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>…</DialogContent>
</Dialog>;