Chat

A chat shows a conversation as a column of message bubbles. Use it for direct messages, support conversations, or comments on a record.

Overview

Wrap the conversation in chat, and put each message row in chat-bubbles. A message itself is a chat-bubble, with chat-bubble-title for the sender's name and time, and chat-bubble-body for the text.

Add chat-bubble-me to bubbles the current user sent. Tabler tints them, and you place them on the other side of the row to tell them apart from replies.

Alice Marlin

10:24

Hey, are you free for a quick call?

You

10:26

Sure, give me five minutes.

<div class="chat">
  <div class="chat-bubbles">
    <div>
      <div class="row align-items-end">
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
        </div>
        <div class="col-auto">
          <div class="chat-bubble">
            <div class="chat-bubble-title">
              <div class="row">
                <div class="col chat-bubble-author">Alice Marlin</div>
                <div class="col-auto chat-bubble-date">10:24</div>
              </div>
            </div>
            <div class="chat-bubble-body">
              <p>Hey, are you free for a quick call?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="row align-items-end justify-content-end">
        <div class="col-auto">
          <div class="chat-bubble chat-bubble-me">
            <div class="chat-bubble-title">
              <div class="row">
                <div class="col chat-bubble-author">You</div>
                <div class="col-auto chat-bubble-date">10:26</div>
              </div>
            </div>
            <div class="chat-bubble-body">
              <p>Sure, give me five minutes.</p>
            </div>
          </div>
        </div>
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/002m.jpg)"></span>
        </div>
      </div>
    </div>
  </div>
</div>

Usage

Message order

Put the avatar and the bubble in the order you want them to read: avatar first for messages from other people, bubble first for chat-bubble-me messages. Add justify-content-end to the row for chat-bubble-me, so the bubble and avatar move to the far side.

Typing indicator

While you wait for a reply, show a bubble with animated-dots after the text - it types itself out and loops.

Alice is typing

<div class="chat-bubble">
  <div class="chat-bubble-body">
    <p class="text-secondary fst-italic mb-0">Alice is typing <span class="animated-dots"></span>
    </p>
  </div>
</div>

Image or GIF in a message

Add an image inside chat-bubble-body, below the text.

<div class="chat">
  <div class="chat-bubble">
    <div class="chat-bubble-body">
      <p>Check this out</p>
      <div class="mt-2">
        <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt class="rounded img-fluid" />
      </div>
    </div>
  </div>
</div>

Examples

Chat window

A card with a scrollable message list and a message input in the footer.

Alice Marlin

Online

Hey, are you free for a quick call?

Sure, give me five minutes.

<div class="card" style="max-width: 28rem;">
  <div class="card-header">
    <div class="row align-items-center flex-fill">
      <div class="col-auto">
        <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
      </div>
      <div class="col">
        <div>Alice Marlin</div>
        <div class="text-secondary">Online</div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chat">
      <div class="chat-bubbles">
        <div>
          <div class="row align-items-end">
            <div class="col-auto">
              <span class="avatar avatar-xs" style="background-image: url(/static/avatars/016f.jpg)"></span>
            </div>
            <div class="col-auto">
              <div class="chat-bubble">
                <div class="chat-bubble-body">
                  <p>Hey, are you free for a quick call?</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="row align-items-end justify-content-end">
            <div class="col-auto">
              <div class="chat-bubble chat-bubble-me">
                <div class="chat-bubble-body">
                  <p>Sure, give me five minutes.</p>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <span class="avatar avatar-xs" style="background-image: url(/static/avatars/002m.jpg)"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <div class="input-group input-group-flat">
      <input type="text" class="form-control" placeholder="Type message" />
      <span class="input-group-text">
        <button type="button" class="btn btn-icon" aria-label="Send message">
          <!-- Download SVG icon from http://tabler.io/icons/icon/send -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M10 14l11 -11" />
            <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" />
          </svg>
        </button>
      </span>
    </div>
  </div>
</div>

Accessibility

Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom.
Do not rely on bubble color or side alone to show who sent a message - keep chat-bubble-title with the sender's name, or repeat it for assistive technology with a visually hidden label.
Label icon-only controls in the message input, for example the send button, with aria-label.
The typing indicator is an animated "…" - pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`chat`	component	Container element
`chat-bubbles`	part	Wrapper around a group of messages from one author
`chat-bubble`	part	A single message
`chat-bubble-title`	part	Header line of a message, holding the author and the time
`chat-bubble-author`	part	Author name
`chat-bubble-date`	part	Timestamp
`chat-bubble-body`	part	Message text
`chat-bubble-me`	style	Marks the message as sent by the current user

Menu