Chat Bubble

Example

Hello there

General Kenobi

This is a really long message that should wrap around the chat bubble and not overflow

This is another really long message that should wrap around the chat bubble and not overflow

This is me sending you an image

		<ChatBubble side="right">
	<p>Hello there</p>
</ChatBubble>

<ChatBubble>
	<p>General Kenobi</p>
</ChatBubble>

A chat message bubble with left/right alignment for conversations.

Property Type Description

side

enum

Which side the bubble appears on. Left for received messages, right for sent. Default: 'left'

variant

string

The visual variant. Defaults to "primary" for left and "secondary" for right. Default: —

size

enum

The size of the chat bubble. Default: 'md'

children required

Snippet

The message content.

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLSpanElement

The underlying DOM element. Default: —

Property

side

variant

size

children

class

ref