Social · Floating

WhatsApp float

Floating action button that opens a WhatsApp chat. Pass a single contact for direct chat, or an array of contacts — the button then shows a menu (ideal for a business with multiple branches). Accepts color and iconColor so the bubble can match any brand palette.

Preview

Click the bubble to open the contacts menu.

Default — WhatsApp green (#25d366)

Single contact

TSX

import { WhatsAppFloat } from "kora-ui/client";

<WhatsAppFloat
  contact={{
    name: "Ventas",
    phone: "+52 55 1234 5678",
    message: "Hola, me interesa un producto",
  }}
/>

Multiple contacts (branches)

TSX

import { WhatsAppFloat } from "kora-ui/client";

<WhatsAppFloat
  menuTitle="Elige una sucursal"
  message="Hola, me gustaría cotizar"
  contacts={[
    { name: "Centro",  phone: "+52 55 1111 1111", label: "Av. Reforma 100" },
    { name: "Polanco", phone: "+52 55 2222 2222", label: "Masaryk 200" },
  ]}
/>

Custom color

Any CSS color works — hex, rgb, hsl, named, or CSS variables from your palette (including the active theme). Each bubble below is a real WhatsAppFloat — click to open WhatsApp.

Theme blue

Theme violet

Theme lime

TSX

<WhatsAppFloat
  color="var(--color-violet-600)"
  iconColor="#fff"
  contact={{ name: "Ventas", phone: "+52 55 1234 5678" }}
/>

Props

Prop	Type	Default
contact	WhatsAppContact	—
contacts	WhatsAppContact[]	—
message	string	—
position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"
menuTitle	string	"Choose a contact"
color	string	"#25d366"
iconColor	string	"#ffffff"
icon	ReactNode	<SiWhatsapp />