Buttons
Counter
A quantity stepper. The value rolls in the direction of travel — up when incrementing, down when decrementing.
Circle buttons
Disabled
Usage
<Counter
defaultValue={1}
size="md"
intensity="normal"
spring="smooth"
circle
min={0}
max={10}
step={1}
/>How the motion works
The readout renders both the outgoing and incoming digit during a change, driven by one shared spring so they stay locked together instead of drifting apart the way two independent animations would. Direction is taken from the sign of the change. The buttons reuse SquishButton, so press feedback is the same physics as everywhere else in the library.
RollingNumberusePressuseSpringValue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value. Omit for uncontrolled use. |
| defaultValue | number | 0 | Initial uncontrolled value. |
| onChange | (value: number) => void | — | Fires on every committed change. |
| min / max | number | — | Bounds. Buttons disable at the limits. |
| step | number | 1 | Amount added or removed per press. |
| circle | boolean | true | Round the increment buttons. |
| label | string | "Quantity" | Accessible name for the spinbutton. |