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

<Avatar name="Naraya Design" />

With image source

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

Sizes

<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

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

Avatar group

<AvatarGroup max={4}>
  {people.map((p) => <Avatar key={p.name} name={p.name} />)}
</AvatarGroup>

With metadata

Raka Nugraha

Product Manager

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

Props

Prop	Type	Default	Description
src	`string`	—	URL gambar avatar.
alt	`string`	`""`	Alt text untuk image avatar.
name	`string`	—	Nama user untuk fallback initials + title.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Ukuran avatar.
square	`boolean`	`false`	Bentuk kotak rounded, bukan circle.
AvatarGroup.max	`number`	`5`	Jumlah 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

Avatar

Overview

Examples

Props

Tokens Used

Accessibility

Related