A pill button with a speech bubble icon that opens a chat with a prefilled message, with a hover glow, sizes, variants and an unread dot.
npx shadcn@latest add https://hyperblur.dev/r/chat-order-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chat-order-button.tsx.
import { ChatOrderButton } from "@/components/hyperblur/chat-order-button"
<ChatOrderButton phone="+1 555 555 0142" message="Hi! I'd like to order a Smash Double." />| Prop | Type | Default | Description |
|---|---|---|---|
| phone | string | "1 555 555 0142" | Phone number with country code. Non-digits are stripped to build the chat link. |
| message | string | "Hi! I'd like to place an order for pickup." | Prefilled message, URL encoded into the link. |
| label | string | "Order on chat" | Button text. |
| sublabel | string | Optional second line, for example a reply time. | |
| size | "sm" | "md" | "lg" | "md" | Height and text size. |
| variant | "dark" | "light" | "outline" | "solid" | "dark" | Visual style of the pill. |
| unread | boolean | number | false | Shows a pulsing dot, or a count when a number above 0 is given. |
| unreadLabel | string | "unread" | Screen reader text announced with the unread dot. |
| accent | string | "#25d366" | Color of the bubble icon and hover glow. |
| newTab | boolean | true | Open the chat in a new tab. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |