Quantity Indicator

The Quantity Indicator displays contextual quantities and can be used alongside other components such as a button or icon.

Examples

Default

Preview

Code

import {
  QuantityIndicator,
  QuantityIndicatorValue,
} from '@hv/ui/quantity-indicator';
import { Button } from '@hv/ui/button';

<QuantityIndicator asChild>
  <Button variant='ghost' {...props}>
    <ShoppingCart size={24} />
    <QuantityIndicatorValue>{5}</QuantityIndicatorValue>
  </Button>
</QuantityIndicator>;

Secondary

Preview

Code

import {
  QuantityIndicator,
  QuantityIndicatorValue,
} from '@hv/ui/quantity-indicator';
import { Button } from '@hv/ui/button';

<QuantityIndicator asChild>
  <Button className='flex items-baseline' variant='ghost' {...props}>
    In Stock
    <QuantityIndicatorValue variant='secondary'>{5}</QuantityIndicatorValue>
  </Button>
</QuantityIndicator>;

Summary of Functionality

• The QuantityIndicator provides a wrapper for positioning a visual quantity indicator relative to another component like a button or icon.

• The QuantityIndicatorValue displays the quantity with a customizable appearance.

• The Button acts as a trigger for an action like opening a cart drawer or linking elsewhere.

---

Props

Name	Description	Type
onClick	Callback when the button is clicked	Function
className	Additional CSS classes for the button	String
children	The children of the quantity indicator	ReactNode
...props	Additional props for the button	Object

Variants

Variant	Description	Values
variant	Controls the visual style of the badge	default secondary
size	Controls the size of the indicator	default sm lg

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all users, update the source code in the UI component library directly.
• Otherwise, pass className overrides.