> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <ItemCounterButton />

> Increment/decrement stepper for adjusting item or modifier quantities.

# ItemCounterButton

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { ItemCounterButton } from '@/components/ItemCounterButton'
```

## Usage

```tsx theme={null}
<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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.