Skip to main content

​
CartNavButton

A button that displays the current cart item count as a badge and optionally shows the cart total. Typically placed in the header or as a floating action button on mobile.

​
Preview

View in Storybook

​
Import

import { CartNavButton } from '@/components/CartNavButton'

​
Usage

<CartNavButton
  itemCount={cart.itemCount}
  total={cart.total}
  onClick={() => setIsCartOpen(true)}
/>

​
Props

​
itemCount
number
required
Number of items currently in the cart.
​
total
number
Cart total to display alongside the button text.
​
onClick
() => void
required
Callback fired when the button is clicked — typically opens the CartPanel.

​
Behavior

  • Badge animates with a bounce effect when item count changes
  • Hides when cart is empty (itemCount === 0)
  • On mobile, renders as a fixed-position floating button at the bottom
  • On desktop, renders inline in the header navigation