CartButton

The cart icon with a count badge, and the count said in words.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { Button, CartButton } from '@kerf-js/veneer'export function Count() {  const count = state(3)  return (    <>      <CartButton        count={count.value}        onClick={() => (count.value = 0)}      />      <Button        emphasis="outline"        tone="neutral"        size="sm"        onClick={() => count.value++}      >        Add a hoodie      </Button>    </>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { CartButton } from '@kerf-js/veneer'

Accessibility

Its name is "Cart, 3 items", so the number is never colour or position alone.

API Reference

Prop	Type	Default	Description
`count`	`number`	—	The items in the cart.

Event	Type	Default	Description
`onClick`	`() => void`	—	Usually opens a `CartDrawer`.

RelatedCart drawer