Components
Alert
SketchAlert — an inline status banner with a hand-drawn border and leading icon.
SketchAlert renders an inline status or info banner. It uses a rough.js border
via SketchCard, a leading icon to convey severity, and a monochrome palette —
variants are distinguished by icon, not colour.
Default
import { SketchAlert } from "blackchalk";<SketchAlert title="Heads up" variant="info">Your trial ends in 3 days.</SketchAlert>Variants
<SketchAlert title="Saved" variant="success">Your changes have been published.</SketchAlert><SketchAlert title="Low on credits" variant="warning">You have 2 generations left.</SketchAlert><SketchAlert title="Something went wrong" variant="error" onClose={() => {}}>We couldn't save your changes. Try again.</SketchAlert>Props
| Prop | Type | Default |
|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" |
title | string | — |
children | ReactNode | — |
icon | IconName | — |
onClose | () => void | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.