Komponen / Tampilan data
Avatar
Inisial atau foto orang dan perusahaan. AvatarGroup menumpuk beberapa avatar dan meringkas sisanya menjadi "+n".
Import
tsx
import { Avatar, AvatarGroup } from '@divistant/circca-react';Props · Avatar
Juga menerima atribut <span>. Bila `src` gagal dimuat, Avatar kembali ke inisial.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| name | string | — | Nama lengkap. Menjadi label aksesibel dan sumber inisial (kata pertama + terakhir; "PT"/"CV" diabaikan). |
| initials | string | — | Inisial yang ditampilkan (properti Figma "Initials"), maks. 2 huruf. Bawaan: diturunkan dari name. |
| src | string | — | URL foto. |
| shape | 'circle' | 'square' | 'circle' | Circle = orang; Square = perusahaan/organisasi. |
| size | 20 | 24 | 32 | 40 | 20 | Ukuran dalam px. |
| decorative | boolean | false | Nama sudah tertulis di sebelahnya → avatar disembunyikan dari pembaca layar. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · AvatarGroup
Children berupa <Avatar>; ukuran diseragamkan dan bentuknya selalu Circle. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Elemen Avatar, urut dari yang paling relevan (mis. penanggung jawab dulu). |
| size | 24 | 32 | 24 | Ukuran avatar dalam px. |
| max | number | 3 | Jumlah avatar yang terlihat; sisanya menjadi "+n" (properti Figma "Overflow count"). |
| overflowCount | number | 0 | Orang lain yang tidak dikirim sebagai children (total dari server). Ditambahkan ke "+n". |
| aria-label | string | — | Nama grup untuk pembaca layar, mis. "Tim proyek PO-2026-0142". |
Sumber
Kode komponen ada di packages/react/src/components/avatar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.