CartButton

CartButton renderiza un botón de ícono (por defecto un ícono de carrito) con una insignia numérica en la esquina superior derecha que muestra totalItems. La insignia solo aparece cuando totalItems es mayor que cero. Úsalo en barras de navegación o encabezados para dar a los usuarios una vista rápida del conteo de su carrito.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onClick | () => void | Sí | — | Callback que se dispara cuando se presiona el botón. | | totalItems | number | Sí | — | Número mostrado en la insignia. La insignia se oculta cuando es 0. | | icon | string | No | "cart" | Identificador del ícono para el botón. | | iconPaths | any[] | No | — | Datos de path SVG para un ícono personalizado (alternativa a icon). | | iconSize | number | No | — | Tamaño del ícono en píxeles (sobreescribe el tamaño calculado). | | color | string | No | — | Clave de color del tema o cualquier color CSS para el botón. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | borderRadius | number | No | 99 | Radio del borde en píxeles. El valor por defecto produce un botón circular. | | disabled | boolean | No | — | Deshabilita la interacción en el botón. | | hasShadow | boolean | No | false | Si se aplica sombra al botón de ícono. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el tamaño del botón y de la insignia. | | className | string | No | — | Clase CSS adicional aplicada al contenedor exterior. | | containerStyle | React.CSSProperties | No | — | Estilos en línea aplicados al div contenedor exterior. | | buttonStyle | React.CSSProperties | No | — | Estilos en línea aplicados al IconButton interior. | | badgeStyle | React.CSSProperties | No | — | Estilos en línea aplicados al elemento de insignia. |

Uso

Básico

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

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

Carrito vacío (insignia oculta)

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

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

Estilo de insignia personalizado

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

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