Theme:

Chat Bubble

Conversation UI. Use dui-chat-start for incoming and dui-chat-end for outgoing messages, with an avatar, header, bubble, and footer.

Conversation

Aisha 12:45

Hey! Are we still on for today?

Absolutely - see you at 3.

<div class="dui-chat dui-chat-start"> <div class="dui-chat-avatar"><img src="…" /></div> <div class="dui-chat-header">Aisha <span>12:45</span></div> <div class="dui-chat-bubble">Hey! Are we still on for today?</div> <div class="dui-chat-footer">Seen</div> </div> <div class="dui-chat dui-chat-end"> <div class="dui-chat-bubble dui-chat-bubble-primary">Absolutely - see you at 3.</div> </div>

Bubble Colors

Default

Secondary

Accent

Success