# WhatsApp button

WhatsApp button is a neobrutalist React component from Cruise UI. "Chat on WhatsApp": opens wa.me with your number and a message filled in.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/whatsapp-button
```

Import: `import { CruiseWhatsAppButton } from "@/components/cruise/whatsapp-button";`

## When to use

Letting customers reach a business on WhatsApp (orders, support).

## When not to

Where a WhatsApp chat isn't monitored.

## Example (React)

```tsx
import { CruiseWhatsAppButton } from "@/components/cruise/whatsapp-button";

export default function WhatsAppButtonExample() {
  return (
    <div className="flex flex-wrap gap-4">
      <CruiseWhatsAppButton phone="0801 234 5678" message="Hello, I'd like to order the Classic Celebration Cake." />
      <CruiseWhatsAppButton phone="+2348012345678" tone="success" label="Ask about delivery" />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<a class="brutal btn on-primary" href="https://wa.me/2348012345678?text=Hello%2C%20I%27d%20like%20to%20order" target="_blank" rel="noopener noreferrer">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
  Chat on WhatsApp <span class="visually-hidden">(opens in a new tab)</span>
</a>
<!-- Success tone: class="brutal btn btn-success". -->
```

## Props: CruiseWhatsAppButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `phone` | `string` | — | The number to chat with, in any form (0801…, +234…). |
| `message?` | `string` | — | Text to start the chat with (URL-encoded for you). |
| `label?` | `string` | `"Chat on WhatsApp"` | — |
| `tone?` | `"success" \| "default"` | `"default"` | — |
| `className?` | `string` | — | — |

## Accessibility

- A real link, opening in a new tab (announced to screen readers).
- Lucide's message-circle icon, decorative; the text says what it does.