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 it with npx shadcn@latest add @cruiseui/whatsapp-button.
Install
Terminal
npx shadcn@latest add @cruiseui/whatsapp-buttonFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
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>
);
}
<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". -->Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Letting customers reach a business on WhatsApp (orders, support).
When not to
Where a WhatsApp chat isn't monitored.
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.