Live Docs

Data Display /

stable

Avatar

Representasi visual user/team dengan gambar atau fallback initials. Termasuk AvatarGroup untuk kumpulan user.

import { Avatar, AvatarGroup } from "@naraya/ui";

Overview

Avatar dipakai untuk identitas user di nav, comment, assignee list, atau collaborator list. Jika gambar gagal dimuat, komponen otomatis fallback ke initials.

Examples

Fallback initials

ND
<Avatar name="Naraya Design" />

With image source

User profile
<Avatar src="https://i.pravatar.cc/80?img=12" alt="User profile" name="Ayu Prameswari" />

Sizes

XS
SM
MD
LG
XL
<Avatar size="xs" name="XS" />
<Avatar size="sm" name="SM" />
<Avatar size="md" name="MD" />
<Avatar size="lg" name="LG" />
<Avatar size="xl" name="XL" />

Square avatar

RO
SQ
<Avatar name="Round" />
<Avatar name="Square" square />

Avatar group

+2
BM
NP
RN
AP
<AvatarGroup max={4}>
  {people.map((p) => <Avatar key={p.name} name={p.name} />)}
</AvatarGroup>

With metadata

RN

Raka Nugraha

Product Manager

<Inline gap="3" align="center">
  <Avatar name="Raka Nugraha" />
  <Text>Raka Nugraha</Text>
</Inline>

Props

PropTypeDefaultDescription
srcstringURL gambar avatar.
altstring""Alt text untuk image avatar.
namestringNama user untuk fallback initials + title.
size"xs" | "sm" | "md" | "lg" | "xl""md"Ukuran avatar.
squarebooleanfalseBentuk kotak rounded, bukan circle.
AvatarGroup.maxnumber5Jumlah avatar visible sebelum overflow +N.

Tokens Used

--bg-surface

Fallback background

--text-main

Initials text color

--border-subtle

Avatar border ring

--radius-full/lg

Circle/square rounding

Accessibility

  • Isi alt saat avatar informatif; jika dekoratif, alt bisa kosong.
  • Fallback initials membantu identifikasi saat image gagal dimuat.
  • Jangan andalkan warna/avatar saja untuk identitas penting, selalu tampilkan nama di dekatnya.