CartButton

CartButton renders an icon button (defaulting to a cart icon) with a numeric badge in the top-right corner showing totalItems. The badge only appears when totalItems is greater than zero. Use it in navigation bars or headers to give users a quick view of their cart count.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onClick | () => void | Yes | — | Callback fired when the button is pressed. | | totalItems | number | Yes | — | Number displayed in the badge. Badge is hidden when this is 0. | | icon | string | No | "cart" | Icon identifier for the button. | | iconPaths | any[] | No | — | SVG path data for a custom icon (alternative to icon). | | iconSize | number | No | — | Override icon size in pixels. | | color | string | No | — | Theme color key or any CSS hex/named color for the button. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | borderRadius | number | No | 99 | Border radius in pixels. Default produces a circular button. | | disabled | boolean | No | — | Disables interaction on the button. | | hasShadow | boolean | No | false | Whether to apply a drop shadow to the icon button. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls button and badge sizing. | | className | string | No | — | Additional CSS class applied to the outer wrapper. | | containerStyle | React.CSSProperties | No | — | Inline styles applied to the outer wrapper div. | | buttonStyle | React.CSSProperties | No | — | Inline styles applied to the IconButton inside. | | badgeStyle | React.CSSProperties | No | — | Inline styles applied to the badge element. |

Usage

Basic

import CartButton from '@/components/buttons/CartButton';

export default function Header() {
  return (
    <CartButton
      totalItems={3}
      onClick={() => console.log('open cart')}
    />
  );
}

Empty cart (badge hidden)

import CartButton from '@/components/buttons/CartButton';

export default function Header() {
  return (
    <CartButton
      totalItems={0}
      onClick={() => console.log('open cart')}
    />
  );
}

Custom badge style

import CartButton from '@/components/buttons/CartButton';

export default function Header() {
  return (
    <CartButton
      totalItems={12}
      onClick={() => {}}
      size="lg"
      badgeStyle={{ background: 'red', color: '#fff' }}
    />
  );
}