---
title: "Chat"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Chat Bubble with start/end alignment, avatars, timestamps, and status indicators. Build accessible messaging UIs without JavaScript."
url: https://frutjam.com/id/components/chat
---

# Chat Bubble Component

Komponen obrolan menampilkan pesan percakapan dalam format yang mudah dibaca dan terorganisir. Dibangun dengan HTML semantik dan tata letak yang fleksibel, gelembung obrolan mewakili pesan pengguna dan sistem. Sistem obrolan Frutjam mendukung berbagai warna, perataan, dan gaya—ideal untuk antarmuka perpesanan, panel dukungan pelanggan, dan UI percakapan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas                 | Jenis    | Keterangan                                    |
| --------------------- | -------- | --------------------------------------------- |
| chat                  | Basis    | Pembungkus untuk satu baris pesan obrolan     |
| chat-bubble           | Pengubah | Gelembung pesan bergaya                       |
| chat-avatar           | Pengubah | Avatar ditampilkan di samping pesan           |
| chat-header           | Pengubah | Nama pengirim atau metadata di atas gelembung |
| chat-footer           | Pengubah | Stempel waktu atau status di bawah gelembung  |
| chat-start            | Pengubah | Sejajarkan gelembung ke kiri (pesan masuk)    |
| chat-end              | Pengubah | Sejajarkan gelembung ke kanan (pesan keluar)  |
| chat-xs               | Ukuran   | Sangat kecil                                  |
| chat-sm               | Ukuran   | Kecil                                         |
| chat-md               | Ukuran   | Sedang (standar)                              |
| chat-lg               | Ukuran   | Besar                                         |
| chat-xl               | Ukuran   | Ekstra besar                                  |
| chat-bubble-primary   | Warna    | Gelembung warna tema utama                    |
| chat-bubble-secondary | Warna    | Gelembung warna tema sekunder                 |
| chat-bubble-accent    | Warna    | Gelembung warna tema aksen                    |
| chat-bubble-neutral   | Warna    | Gelembung warna tema netral                   |
| chat-bubble-info      | Warna    | Gelembung warna semantik info                 |
| chat-bubble-success   | Warna    | Gelembung warna semantik sukses               |
| chat-bubble-warning   | Warna    | Gelembung warna semantik peringatan           |
| chat-bubble-error     | Warna    | Kesalahan gelembung warna semantik            |

## Penggunaan Dasar

## Ngobrol dengan Avatar

```html
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>
```

## Ukuran Obrolan

```html
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>
```

## Gaya Obrolan

```html
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>
```

## Header dan Footer Obrolan

```html
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>
```

## Utas Percakapan

```html
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>
```