Components
Dialog
SketchDialog — a hand-drawn modal dialog that renders into a portal.
SketchDialog renders its children inside a SketchCard centred on the screen via
a document.body portal. It animates in and out with a springy sketch feel. Control
visibility with the open prop.
Default
import { useState } from "react";import { SketchDialog, SketchButton } from "blackchalk";const DialogBody = ({ onClose }) => (<div style={{ padding: 24, width: 320, fontFamily: "inherit" }}> <h3 style={{ marginTop: 0 }}>Delete item?</h3> <p>This action cannot be undone.</p> <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 16 }}> <SketchButton variant="tertiary" onClick={onClose}>Cancel</SketchButton> <SketchButton variant="primary" onClick={onClose}>Delete</SketchButton> </div></div>);export default function Demo() {const [open, setOpen] = useState(false);return ( <> <SketchButton onClick={() => setOpen(true)}>Open dialog</SketchButton> <SketchDialog open={open}> <DialogBody onClose={() => setOpen(false)} /> </SketchDialog> </>);}Props
| Prop | Type | Default |
|---|---|---|
open | boolean | — |
children | ReactNode | — |
className | string | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.