Chat elements as the name suggests can be used for messaging. To make chat bubbles use Chat.Bubble component. Wrap your chat bubbles into Chat.Content. You must set chat items alignment by extend Chat.Item component with align property.

You can put your avatar into the chat elements. Use Chat.Avatar component instead the default avatar component.

Me

consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

1 hrs ago

Charlie

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2 hrs ago

Chat section is an element that can be used for marking time section, look the example.

Change the bubble color with variant property to differentiate each chat bubbles.

You can put chat bubble into another bubble to make mentioned message. Insert images or any elements to make more rich messages.

Me

Lorem ipsum dolor sit amet.

Duis aute irure dolor in

1 hrs ago

Charlie

Duis aute irure dolor in

Excepteur sint occaecat cupidatat non proident, sunt in.

2 hrs ago

Me

Porta.zip

Cras justo odio

Lorem ipsum dolor sit amet.

Duis aute irure dolor in

1 hrs ago