Komponen / Tampilan data

Avatar

Inisial atau foto orang dan perusahaan. AvatarGroup menumpuk beberapa avatar dan meringkas sisanya menjadi "+n".

React · BetaFigma · siapFigma Sumber

Ukuran & bentuk

20 untuk baris tabel padat, 24 untuk daftar dan komentar, 32 untuk kartu dan header, 40 untuk profil. Circle untuk orang, Square untuk perusahaan.

import { Avatar } from '@divistant/circca-react';

// Circle untuk orang, Square untuk perusahaan. Inisial diturunkan otomatis dari `name`.
export default function Example() {
  return (
    <div className="grid gap-4">
      <div className="flex items-end gap-3">
        <Avatar name="Anisa Nugraha" size={20} />
        <Avatar name="Anisa Nugraha" size={24} />
        <Avatar name="Anisa Nugraha" size={32} />
        <Avatar name="Anisa Nugraha" size={40} />
      </div>
      <div className="flex items-end gap-3">
        <Avatar name="PT Mitra Energi Persada" shape="square" size={20} />
        <Avatar name="PT Mitra Energi Persada" shape="square" size={24} />
        <Avatar name="PT Mitra Energi Persada" shape="square" size={32} />
        <Avatar name="PT Mitra Energi Persada" shape="square" size={40} />
      </div>
    </div>
  );
}

Bersama nama

Bila nama sudah tertulis di sebelahnya, tandai avatar sebagai `decorative` agar tidak dibacakan dua kali.

Anisa NugrahaAccount Manager
Rina KartikaFinance
Hendra WijayaDireksi

PT Pelanggan Contoh A· PO-2026-0142

import { Avatar } from '@divistant/circca-react';

// Avatar di samping nama: nama sudah tertulis, jadi avatar cukup hiasan (`decorative`).
const pemilik = [
  { name: 'Anisa Nugraha', role: 'Account Manager' },
  { name: 'Rina Kartika', role: 'Finance' },
  { name: 'Hendra Wijaya', role: 'Direksi' },
];

export default function Example() {
  return (
    <div className="grid gap-4">
      <ul className="grid gap-3">
        {pemilik.map(p => (
          <li key={p.name} className="flex items-center gap-2.5">
            <Avatar name={p.name} size={32} decorative />
            <div className="grid">
              <span className="type-body-default-medium text-default">{p.name}</span>
              <span className="type-caption-default text-muted">{p.role}</span>
            </div>
          </li>
        ))}
      </ul>

      <div className="flex items-center gap-2 type-callout-default text-default">
        <Avatar name="PT Pelanggan Contoh A" shape="square" size={24} decorative />
        PT Pelanggan Contoh A
        <span className="text-muted">· PO-2026-0142</span>
      </div>
    </div>
  );
}

AvatarGroup

Tim proyek atau peserta rapat. Lebih dari `max` orang diringkas menjadi "+n"; `overflowCount` menambah jumlah orang yang tidak dimuat.

Tim proyek PO-2026-0142

10 peserta rapat kickoff

import { Avatar, AvatarGroup } from '@divistant/circca-react';

// Tim proyek di kartu dan header. Lebih dari `max` orang diringkas menjadi "+n".
const tim = ['Dimas Prasetyo', 'Anisa Nugraha', 'Budi Santoso', 'Rina Kartika', 'Hendra Wijaya'];

export default function Example() {
  return (
    <div className="grid gap-4">
      <div className="flex items-center gap-3">
        <AvatarGroup size={24} max={3} aria-label="Tim proyek PO-2026-0142">
          {tim.map(nama => (
            <Avatar key={nama} name={nama} />
          ))}
        </AvatarGroup>
        <span className="type-callout-default text-muted">Tim proyek PO-2026-0142</span>
      </div>

      <div className="flex items-center gap-3">
        <AvatarGroup size={32} max={3} overflowCount={7} aria-label="Peserta rapat kickoff">
          {tim.slice(0, 3).map(nama => (
            <Avatar key={nama} name={nama} />
          ))}
        </AvatarGroup>
        <span className="type-callout-default text-muted">10 peserta rapat kickoff</span>
      </div>
    </div>
  );
}