Chat Bubble

Message bubbles for chat interfaces with sent/received styles, avatars, timestamps, delivery status, and color variants.

Default

Hey, how's the project going?
Going well! Just pushed the latest changes.
That's great to hear. Let me know if you need any help.
Will do, thanks!
<div class="sui-chat">
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-bubble">Hey, how's the project going?</div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Going well! Just pushed the latest changes.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-bubble">That's great to hear. Let me know if you need any help.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Will do, thanks!</div>
  </div>
</div>

With Avatar

AM
Did you get a chance to review the PR?
JD
Yes, left some comments. Looks mostly good.
AM
I'll address them today.
<div class="sui-chat">
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">Did you get a chance to review the PR?</div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-avatar" style="background:var(--sui-primary);color:#fff;">JD</div>
    <div class="sui-chat-bubble">Yes, left some comments. Looks mostly good.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">I'll address them today.</div>
  </div>
</div>

With Timestamp

AM
Are we still meeting at 3?
2:45 PM
Yes, see you in the conference room.
2:47 PM
AM
Perfect, bringing my laptop for the demo.
2:48 PM
<div class="sui-chat">
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div>
      <div class="sui-chat-bubble">Are we still meeting at 3?</div>
      <div class="sui-chat-meta">2:45 PM</div>
    </div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div>
      <div class="sui-chat-bubble">Yes, see you in the conference room.</div>
      <div class="sui-chat-meta">2:47 PM</div>
    </div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div>
      <div class="sui-chat-bubble">Perfect, bringing my laptop for the demo.</div>
      <div class="sui-chat-meta">2:48 PM</div>
    </div>
  </div>
</div>

With Status

Deployment is done.
3:12 PM ✓✓
Can you verify on staging?
3:13 PM ✓✓
Also updated the docs.
3:15 PM
<div class="sui-chat">
  <div class="sui-chat-message sui-chat-message-sent">
    <div>
      <div class="sui-chat-bubble">Deployment is done.</div>
      <div class="sui-chat-meta">
        <span>3:12 PM</span>
        <span class="sui-chat-status sui-chat-status-read">&#10003;&#10003;</span>
      </div>
    </div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div>
      <div class="sui-chat-bubble">Can you verify on staging?</div>
      <div class="sui-chat-meta">
        <span>3:13 PM</span>
        <span class="sui-chat-status sui-chat-status-delivered">&#10003;&#10003;</span>
      </div>
    </div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div>
      <div class="sui-chat-bubble">Also updated the docs.</div>
      <div class="sui-chat-meta">
        <span>3:15 PM</span>
        <span class="sui-chat-status sui-chat-status-sent">&#10003;</span>
      </div>
    </div>
  </div>
</div>

<!-- Status variants -->
<span class="sui-chat-status sui-chat-status-sent">&#10003;</span>
<span class="sui-chat-status sui-chat-status-delivered">&#10003;&#10003;</span>
<span class="sui-chat-status sui-chat-status-read">&#10003;&#10003;</span>

Colors

Default received
Primary (default)
Default received
Success sent
Default received
Danger sent
Default received
Info sent
<!-- Default (primary) -->
<div class="sui-chat">
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Primary sent</div>
  </div>
</div>

<!-- Success -->
<div class="sui-chat sui-chat-success">
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Success sent</div>
  </div>
</div>

<!-- Danger -->
<div class="sui-chat sui-chat-danger">
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Danger sent</div>
  </div>
</div>

<!-- Info -->
<div class="sui-chat sui-chat-info">
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Info sent</div>
  </div>
</div>

Grouped

AM
Hey, quick update on the bug.
AM
Found the root cause, it was a race condition.
AM
Fix is ready for review.
Awesome, I'll take a look now.
Approved and merged!
<div class="sui-chat sui-chat-grouped">
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">Hey, quick update on the bug.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">Found the root cause, it was a race condition.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">Fix is ready for review.</div>
  </div>
</div>

<div class="sui-chat sui-chat-grouped">
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Awesome, I'll take a look now.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Approved and merged!</div>
  </div>
</div>

Inset

AM
The inset style gives a pressed-in look.
Looks great with the neumorphic theme!
AM
Perfect for embedded chat widgets.
<div class="sui-chat sui-chat-inset">
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">The inset style gives a pressed-in look.</div>
  </div>
  <div class="sui-chat-message sui-chat-message-sent">
    <div class="sui-chat-bubble">Looks great with the neumorphic theme!</div>
  </div>
  <div class="sui-chat-message sui-chat-message-received">
    <div class="sui-chat-avatar">AM</div>
    <div class="sui-chat-bubble">Perfect for embedded chat widgets.</div>
  </div>
</div>

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.