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

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

​CartNavButton

​Preview

​Import

​Usage

​Props

​Behavior