WhatsAppButton

WhatsAppButton constructs a wa.me URL with the phone number and pre-filled message, then opens it in a new browser tab. This works on both desktop (WhatsApp Web) and mobile (native WhatsApp app). The component wraps Button and defaults to a green success color with a WhatsApp icon. Use it on customer detail pages, order confirmations, or wherever you need a one-tap WhatsApp contact button.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | phoneNumber | string | Yes | — | Phone number in international format without + or spaces (e.g. 5491112345678). | | message | string | Yes | — | Pre-filled message text that will appear in the WhatsApp compose field. | | title | string | No | "Enviar WhatsApp" | Label displayed on the button. | | icon | string | No | "whatsApp" | Icon identifier shown before the label. | | color | string | No | "success" | Theme color key or any CSS hex/named color. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls padding, font size, and icon size. | | borderRadius | number | No | 4 | Border radius in pixels. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | style | React.CSSProperties | No | — | Inline styles applied to the button. |

Usage

Basic

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

export default function Example() {
  return (
    <WhatsAppButton
      phoneNumber="5491112345678"
      message="Hi! I have a question about my order."
    />
  );
}

Custom label and order context

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

export default function OrderCard({ order }: { order: { id: string; phone: string } }) {
  return (
    <WhatsAppButton
      phoneNumber={order.phone}
      message={`Hello, I'm contacting you about order #${order.id}.`}
      title="Contact via WhatsApp"
      size="sm"
      type="outline"
    />
  );
}