Komponen / Tampilan data

Avatar

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

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Tampilkan nama di sebelah avatar bila ruang cukup; avatar membantu mengenali, nama memastikan.
Pakai Square untuk perusahaan (customer, distributor) agar tidak tertukar dengan orang.
Di AvatarGroup, tampilkan maksimal 3–4 avatar lalu ringkas sisanya menjadi "+n".

Hindari

Jangan mengandalkan avatar saja untuk informasi penting seperti siapa penyetuju dokumen — tulis namanya.
Jangan mencampur ukuran avatar dalam satu daftar atau satu grup.
Jangan memakai warna avatar berbeda-beda sebagai kode makna; warna avatar selalu netral.

Disetujui oleh

Rina KartikaFinance

Hendra WijayaDireksi

GunakanAvatar ditemani nama dan peran.

Disetujui oleh

HindariDeretan avatar tanpa nama untuk informasi penting (penyetuju).

GunakanTiga avatar lalu "+n".

HindariSemua anggota ditumpuk sampai sulit dibaca.

Inisial dua huruf, huruf besar: kata pertama + kata terakhir nama ("Anisa Nugraha" → "AN").
Untuk perusahaan, abaikan bentuk badan usaha: "PT Mitra Energi Persada" → "MP".