CartButton

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

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, CartButton } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { CartButton } from '@weft-js/warp'

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