Components

Chat Bubble

Chat bubbles are ideal for organizing conversations in messaging apps, chats, social media platforms, and similar spaces.

Basic example

Assign the `chat-receiver` class to the receiver’s chat bubble and the `chat-sender` class to the sender’s chat bubble.

Just booked tickets for our vacation!

Awesome! I can't wait!

Apply the `chat-avatar` class to show the avatar of either the sender or the receiver.

I finally finished the marathon!

Wow, that's incredible! I'm so proud of you!

Apply the `chat-header` class to incorporate a header into the chat bubble.

Obi-Wan Kenobi 12:45

I aced my final exams!

Anakin 12:46

Fantastic news! You worked so hard for it!

Apply the `chat-footer` class to incorporate a footer into the chat bubble.

Just finished my first painting!

Delivered

That’s amazing! I’d love to see it!

Seen

Here's an example of a chat bubble that includes an avatar, header, and footer.

Obi-Wan Kenobi 12:45

I started learning guitar today!

Delivered

Anakin 12:46

That's awesome! You're going to be great at it!

Seen

This is an example of a chat bubble featuring an image.

Check out my new watch! 🤩

The following example demonstrates a chat bubble containing multiple images sent or received.

Places on my bucket list. 🤩

Here's an example of a chat bubble with a file attachment.

Semji Design documentation 📁

documentation.pdf

12 Pages 18 MB PDF

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`chat`	component	The class for the chat container which contains the chat bubbles.
`chat-bubble`	part	For the content of chat.
`chat-avatar`	part	For display avatar of the sender or receiver.
`chat-header`	part	For the header of the chat bubble.
`chat-footer`	part	For the footer of the chat bubble.
`chat-receiver`	modifier	For the chat bubble of the receiver.
`chat-sender`	modifier	For the chat bubble of the sender.