tabler/docs/content/ui/components/chat.mdx

---
title: Chat
summary: A chat shows a conversation as a column of message bubbles. Use it for direct messages, support conversations, or comments on a record.
description: Build a conversation view with message bubbles, sender info, and a typing indicator.
source: core/scss/ui/_chat.scss
css-vars: chat
classnames:
  component:
    - class: chat
      desc: Container element
  part:
    - class: chat-bubbles
      desc: Wrapper around a group of messages from one author
    - class: chat-bubble
      desc: A single message
    - class: chat-bubble-title
      desc: Header line of a message, holding the author and the time
    - class: chat-bubble-author
      desc: Author name
    - class: chat-bubble-date
      desc: Timestamp
    - class: chat-bubble-body
      desc: Message text
  style:
    - class: chat-bubble-me
      desc: Marks the message as sent by the current user
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro'

## 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.

<Example background="primary">
<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>
</Example>

## 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.

<Example background="primary">
<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>
</Example>

### Image or GIF in a message

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

<Example codeOnly>
<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>
</Example>

## Examples

### Chat window

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

<Example bg="surface-secondary">
<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">
          <Icon name="send" />
        </button>
      </span>
    </div>
  </div>
</div>
</Example>

## 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.