Components
Order Status
SketchOrderStatus — a hand-drawn horizontal stepper for tracking order progress.
SketchOrderStatus renders a rough.js horizontal stepper with dot nodes, mapping
order fulfilment steps to a current position. It's fluid — it fills the width of its
container, so wrap it to size it.
Default
import { SketchOrderStatus } from "blackchalk";<SketchOrderStatus currentStep={1} />Custom steps
import { SketchOrderStatus } from "blackchalk";<SketchOrderStatussteps={["Placed", "Confirmed", "Shipped", "Delivered"]}currentStep={3}/>Props
| Prop | Type | Default |
|---|---|---|
steps | string[] | ["Placed", "Confirmed", "Shipped", "Delivered"] |
currentStep | number | 0 |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.