blackchalkv0.3.0
Components

Filter Bar

SketchFilterBar — a row of hand-drawn filter chips with an active state.

SketchFilterBar renders a wrapping row of rough.js chip buttons. The active chip gets a bolder label and a thicker sketched border; the rest sit at resting weight.

Default

import { SketchFilterBar } from "blackchalk";<SketchFilterBarfilters={[  { label: "All", active: true },  { label: "New" },  { label: "Popular" },  { label: "Sale" },]}/>

Props

SketchFilterBar

PropTypeDefault
filtersFilterChip[]

FilterChip

FieldTypeDefault
labelstring
activeboolean
onClick() => void

See it in the Storybook playground, or read the source.

On this page