WhatsAppButton

WhatsAppButton construye una URL wa.me con el número de teléfono y el mensaje pre-cargado, luego la abre en una nueva pestaña del navegador. Esto funciona tanto en escritorio (WhatsApp Web) como en móvil (app nativa de WhatsApp). El componente envuelve Button y usa por defecto un color verde de éxito con un ícono de WhatsApp. Úsalo en páginas de detalles de clientes, confirmaciones de pedidos o donde necesites un botón de contacto de WhatsApp con un solo toque.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | phoneNumber | string | Sí | — | Número de teléfono en formato internacional sin + ni espacios (ej. 5491112345678). | | message | string | Sí | — | Texto del mensaje pre-cargado que aparecerá en el campo de composición de WhatsApp. | | title | string | No | "Enviar WhatsApp" | Etiqueta que se muestra en el botón. | | icon | string | No | "whatsApp" | Identificador del ícono mostrado antes de la etiqueta. | | color | string | No | "success" | Clave de color del tema o cualquier color CSS (hex o nombre). | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el padding, tamaño de fuente y tamaño del ícono. | | borderRadius | number | No | 4 | Radio del borde en píxeles. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al botón. |

Uso

Básico

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

export default function Example() {
  return (
    <WhatsAppButton
      phoneNumber="5491112345678"
      message="Hola! Tengo una pregunta sobre mi pedido."
    />
  );
}

Etiqueta personalizada y contexto de pedido

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

export default function OrderCard({ order }: { order: { id: string; phone: string } }) {
  return (
    <WhatsAppButton
      phoneNumber={order.phone}
      message={`Hola, me comunico por el pedido #${order.id}.`}
      title="Contactar por WhatsApp"
      size="sm"
      type="outline"
    />
  );
}