Avatar Component
CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar dengan Gambar
Menampilkan foto profil pengguna dengan penyesuaian gambar otomatis dan ukuran responsif.
1 2 3 4 5 6 7 8 9 10 11 | <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.
1 2 3 4 5 6 | <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.
1 2 3 4 5 6 7 8 | <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.
1 2 3 | <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.
1 2 3 4 | <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).
1 2 3 4 5 6 7 | <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.
1 2 3 | <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.
1 2 3 4 5 6 7 | <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.
1 2 3 4 5 6 | <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.
1 2 3 4 5 | <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.
1 2 3 4 5 | <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.
1 2 3 4 5 | <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> |