Use counter to increase or decrease a value in a counter field.

How to use it

import { Counter } from '@engyalo/storefront-components'

<Stack spacing={10} >
    <Counter hideMinus={true} value={1} borderColor="transparent" {...props} />
    <Counter value={2} borderColor="transparent" {...props} />
    <Counter hideMinus={true} value="0" borderColor="transparent" {...props} />


export interface Props extends BoxProps {
  value?: number;
  hideMinus?: boolean;
  noBorder?: boolean;
  name: string;
  addAction: (event: MouseEvent<HTMLButtonElement>) => void;
  minusAction: (event: MouseEvent<HTMLButtonElement>) => void;

Visual Example

Did this page help you?