SnowballSH Foundation UI

Dialog

Pick a framework. Both use the same recipe, so the styling matches exactly.

No decision yet.

Delete draft?

This removes the draft from your workspace.

The draft "Aurora launch notes" will be gone for good. Published posts are not affected.

Dialog props for React
PropTypeDefaultDescription
openbooleanfalseShows the dialog as a modal. In Svelte it is bindable with bind:open.
titlestringHeading text, wired to the dialog via aria-labelledby.
descriptionstringSupporting text under the title, wired via aria-describedby.
size"sm" | "md"mdPanel width.
onClose() => voidCalled after the dialog closes by any path: Escape, backdrop click, or open turning false.
footercontentAction row under the body. A snippet in Svelte, a ReactNode in React.

Also takes className and children. Anything else passes through to the dialog.

dialog.demo.tsx
import { useState } from "react";
import { Button, Dialog } from "../react/index.js";

export default function DialogDemo() {
  const [open, setOpen] = useState(false);
  const [outcome, setOutcome] = useState("No decision yet.");

  const askToDelete = () => {
    setOutcome("No decision yet.");
    setOpen(true);
  };

  return (
    <div className="flex flex-col items-start gap-3">
      <Button variant="secondary" onClick={askToDelete}>
        Delete draft
      </Button>
      <p className="text-sm text-ink-secondary">{outcome}</p>
      <Dialog
        open={open}
        title="Delete draft?"
        description="This removes the draft from your workspace."
        size="sm"
        onClose={() => {
          setOpen(false);
          setOutcome((v) =>
            v === "No decision yet." ? "Dismissed, draft kept." : v,
          );
        }}
        footer={
          <>
            <Button variant="secondary" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => {
                setOutcome("Draft deleted.");
                setOpen(false);
              }}
            >
              Confirm
            </Button>
          </>
        }
      >
        <p className="text-sm text-ink-secondary">
          The draft "Aurora launch notes" will be gone for good. Published posts
          are not affected.
        </p>
      </Dialog>
    </div>
  );
}