blackchalkv0.3.0
Components

Button Group

SketchButtonGroup — a flex row that spaces and aligns sketch buttons.

SketchButtonGroup arranges its children in a wrapping flex row with consistent gap and an optional width cap — useful for action rows like Cancel / Save pairs.

Default

import { SketchButton, SketchButtonGroup } from "blackchalk";<SketchButtonGroup><SketchButton>Cancel</SketchButton><SketchButton variant="primary">Save</SketchButton></SketchButtonGroup>

Capped width

Pass maxWidth to constrain the group to a fixed pixel width.

<SketchButtonGroup maxWidth={240} gap={4}><SketchButton>One</SketchButton><SketchButton>Two</SketchButton><SketchButton>Three</SketchButton></SketchButtonGroup>

Props

PropTypeDefault
childrenReactNode
maxWidthnumber | string"100%"
gapnumber8
styleCSSProperties

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

On this page