Skip to main content

​
ItemCounterButton

A compact stepper control with minus/plus buttons and a quantity display. Used for adjusting item quantities in the cart and modifier option counts.

​
Preview

View in Storybook

​
Import

import { ItemCounterButton } from '@/components/ItemCounterButton'

​
Usage

<ItemCounterButton
  count={quantity}
  onIncrement={() => setQuantity(q => q + 1)}
  onDecrement={() => setQuantity(q => q - 1)}
  min={1}
  max={99}
/>

​
Props

​
count
number
required
The current quantity value.
​
onIncrement
() => void
required
Callback fired when the plus button is clicked.
​
onDecrement
() => void
required
Callback fired when the minus button is clicked.
​
min
number
default:"0"
Minimum allowed value. Decrement button is disabled at this value.
​
max
number
default:"99"
Maximum allowed value. Increment button is disabled at this value.

​
Behavior

  • Disables minus button when count reaches min
  • Disables plus button when count reaches max
  • Animates the count value on change
  • Compact variant available for inline use in modifier options