Overlays

Dialog

Presents a focused task or decision in an accessible modal surface.

@dawn/ui/components/dialog

Preview

Rendered from @dawn/ui

Usage

import { Button } from "@dawn/ui/components/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@dawn/ui/components/dialog";

export const ConfirmDialog = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Confirm appointment</DialogTitle>
        <DialogDescription>
          The patient will receive a confirmation.
        </DialogDescription>
      </DialogHeader>
    </DialogContent>
  </Dialog>
);

API

open / defaultOpenboolean: Controls or initializes the modal state.
onOpenChange(open: boolean) => void: Receives state changes from triggers and dismissals.
DialogContent showCloseButtonboolean: Shows the top-right close action by default.

Exports

DialogDialogTriggerDialogContentDialogHeaderDialogTitleDialogDescriptionDialogFooterDialogCloseDialogOverlayDialogPortal