Chat Bubble

Components

Chat Bubble

Code

Chat Bubble is a conversational UI component for displaying messages in a chat interface, with distinct styles for received and sent messages.

import { ChatBubble } from '@sproutsocial/racine'

<Box display='flex' flexDirection='column' width='300px'>
  <ChatBubble type="received" mb={300}>
    Hey, how's it going?
  </ChatBubble>
  <ChatBubble type="sent" mb={300}>
    Pretty good, thanks!
  </ChatBubble>
  <ChatBubble type="received" size="small" mb={300}>
    Glad to hear it.
  </ChatBubble>
  <ChatBubble type="sent" size="small">
    Same here!
  </ChatBubble>
</Box>

Properties

Name	Type	Default
`children`	`React.ReactNode`
`type`	`\| received` `\| sent`	`"received"`
`size`	`\| default` `\| small`	`"default"`