Chat Bubble
displayIndividual chat message bubble with avatar, timestamp, and own/other variants.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { ChatBubble } from "@launchapp/design-system";Examples
Received message
<ChatBubble message="Hey! How's it going?" timestamp="10:00 AM" />Sent message
<ChatBubble message="Great, thanks!" isOwn timestamp="10:01 AM" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
message* | string | — | Message text content. |
isOwn | boolean | false | Style as sent message when true. |
timestamp | string | — | Timestamp string displayed below the bubble. |
avatar | React.ReactNode | — | Avatar element for the sender. |