> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <CartNavButton />

> Floating or header-mounted button showing cart item count and total.

# CartNavButton

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { CartNavButton } from '@/components/CartNavButton'
```

## Usage

```tsx theme={null}
<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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.