Skip to main content

​
CartNavButton

Need storefront configuration?

Use the public API origin, merchant slug, and location ID. Storefront components never receive a Crave API key; register each exact browser origin before making requests.
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

​
Usage

​
Props

​
number
required
Number of items currently in the cart.
​
number
Cart total to display alongside the button text.
​
() => 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