---
title: "Avatar"
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 Avatar with image, initials, and icon variants. Supports stacked groups, status indicators, and multiple sizes—zero JavaScript required."
url: https://frutjam.com/id/components/avatar
---

# Avatar Component

 Komponen Avatar menampilkan gambar profil pengguna atau inisial dalam wadah yang ringkas dan dapat disesuaikan. Dibangun dengan properti kustom CSS Frutjam, avatar mewakili pengguna, kontributor, atau anggota tim di seluruh antarmuka Anda. Sistem avatar mendukung gambar dan teks, berbagai ukuran, warna, bentuk, indikator status, cincin, dan pengaturan grup—ideal untuk daftar pengguna, komentar, tampilan tim, bagian profil, dan antarmuka perpesanan.

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                                          |
| --------------------- | -------- | --------------------------------------------------- |
| avatar                | Basis    | Wadah avatar melingkar dengan inisial atau gambar   |
| avatar-group          | Pengubah | Tumpukan beberapa avatar yang tumpang tindih        |
| avatar-ring           | Pengubah | Menambahkan batas cincin berwarna di sekitar avatar |
| avatar-circle         | Gaya     | Bentuk lingkaran penuh (default)                    |
| avatar-rounded        | Gaya     | Bentuk persegi panjang bulat                        |
| avatar-square         | Gaya     | Bentuk persegi tanpa pembulatan                     |
| avatar-online         | Gaya     | Indikator status online hijau                       |
| avatar-away           | Gaya     | Indikator status tandang berwarna kuning            |
| avatar-busy           | Gaya     | Indikator status sibuk berwarna merah               |
| avatar-offline        | Gaya     | Indikator status offline berwarna abu-abu           |
| avatar-xs             | Ukuran   | Sangat kecil                                        |
| avatar-sm             | Ukuran   | Kecil                                               |
| avatar-md             | Ukuran   | Sedang (standar)                                    |
| avatar-lg             | Ukuran   | Besar                                               |
| avatar-xl             | Ukuran   | Ekstra besar                                        |
| avatar-2xl            | Ukuran   | 2x ekstra besar                                     |
| avatar-primary        | Warna    | Warna tema utama                                    |
| avatar-secondary      | Warna    | Warna tema sekunder                                 |
| avatar-accent         | Warna    | Warna tema aksen                                    |
| avatar-neutral        | Warna    | Warna tema netral                                   |
| avatar-info           | Warna    | Info warna semantik                                 |
| avatar-success        | Warna    | Warna semantik sukses                               |
| avatar-warning        | Warna    | Warna semantik peringatan                           |
| avatar-error          | Warna    | Kesalahan warna semantik                            |
| avatar-ring-primary   | Warna    | Cincin dengan warna primer                          |
| avatar-ring-secondary | Warna    | Cincin dengan warna sekunder                        |
| avatar-ring-accent    | Warna    | Cincin dengan warna aksen                           |
| avatar-ring-neutral   | Warna    | Cincin dengan warna netral                          |
| avatar-ring-info      | Warna    | Cincin dalam warna info                             |
| avatar-ring-success   | Warna    | Cincin dalam warna sukses                           |
| avatar-ring-warning   | Warna    | Cincin dengan warna peringatan                      |
| avatar-ring-error     | Warna    | Dering dalam warna kesalahan                        |

## Penggunaan Dasar

Buat avatar sederhana dengan inisial teks atau warna.

## Avatar dengan Gambar

Menampilkan foto profil pengguna dengan penyesuaian gambar otomatis dan ukuran responsif.

```html
<div class="avatar avatar-sm">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-md">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-lg">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" />
</div>
```

## Ukuran Avatar

Gunakan varian ukuran untuk menskalakan avatar dari ekstra kecil (xs) hingga 2x besar (2xl) untuk konteks berbeda.

```html
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-secondary">SM</div>
<div class="avatar avatar-md avatar-accent">MD</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-secondary">XL</div>
<div class="avatar avatar-2xl avatar-accent">2XL</div>
```

## Warna Avatar

Terapkan varian warna untuk membedakan avatar berdasarkan peran, tim, atau status saat tidak menggunakan gambar.

```html
<div class="avatar avatar-md avatar-primary">A</div>
<div class="avatar avatar-md avatar-secondary">B</div>
<div class="avatar avatar-md avatar-accent">C</div>
<div class="avatar avatar-md avatar-info">D</div>
<div class="avatar avatar-md avatar-neutral">E</div>
<div class="avatar avatar-md avatar-success">F</div>
<div class="avatar avatar-md avatar-warning">G</div>
<div class="avatar avatar-md avatar-error">H</div>
```

## Bentuk Avatar

Pilih dari bentuk lingkaran (default), bulat, atau persegi agar sesuai dengan sistem desain Anda.

```html
<div class="avatar avatar-lg avatar-circle avatar-primary">●</div>
<div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div>
<div class="avatar avatar-lg avatar-square avatar-accent">■</div>
```

## Avatar dengan Inisial

Tampilkan inisial pengguna untuk identifikasi cepat dalam daftar, rangkaian komentar, dan bagian tim.

```html
<div class="avatar avatar-sm avatar-primary">JD</div>
<div class="avatar avatar-md avatar-secondary">AR</div>
<div class="avatar avatar-lg avatar-accent">MS</div>
<div class="avatar avatar-xl avatar-info">KL</div>
```

## Avatar dengan Indikator Status

Gabungkan avatar dengan lencana status untuk menunjukkan kehadiran atau ketersediaan pengguna (online, offline, sibuk, pergi).

```html
<div class="avatar avatar-md avatar-online avatar-primary">JD</div>

<div class="avatar avatar-md avatar-offline avatar-secondary">AR</div>

<div class="avatar avatar-md avatar-busy avatar-accent">MS</div>

<div class="avatar avatar-md avatar-away avatar-info">KL</div>
```

## Avatar dengan Perbatasan Cincin

Tambahkan cincin dekoratif di sekitar avatar untuk penekanan, penyorotan status, atau pemisahan visual.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div>
```

### Varian Warna Cincin

Pilih warna cincin secara terpisah dari warna latar belakang avatar.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div>
<div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div>
<div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div>
<div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div>
<div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div>
```

## Grup Avatar

Tumpuk beberapa avatar dengan margin negatif otomatis untuk tampilan anggota tim dan kolaborator yang tumpang tindih.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-accent">C</div>
  <div class="avatar avatar-md avatar-info">D</div>
</div>
```

### Grup Avatar dengan Ukuran Berbeda

Gabungkan beberapa ukuran dalam grup untuk hierarki visual.

```html
<div class="avatar-group">
  <div class="avatar avatar-sm avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-lg avatar-accent">C</div>
</div>
```

### Grup Avatar dengan Status

Tampilkan status ketersediaan untuk setiap anggota dalam grup tim.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-online avatar-primary">A</div>
  <div class="avatar avatar-md avatar-offline avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-busy avatar-accent">C</div>
</div>
```

## Varian Gabungan

Padu padankan pengubah ukuran, warna, bentuk, status, dan cincin untuk tampilan avatar yang kompleks.

```html
<div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div>

<div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div>

<div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div>
```