Data Display

Avatar

Represents a user or entity. Supports Photo, Placeholder, Unknown, and More-users variants across four sizes (28/40/56/80). Status rings: active (solid violet), multi (dashed violet), seen (solid grey), multi-seen (dashed grey).

V 1.0View in Storybook

Controls

Single Status

Multi Status

Status seen

Size

Show edit icon

Variants

All Sizes × All Rings

All Variants — Size 56

photo

placeholder

unknown

Edit Icon

28px

40px

56px

80px

Avatar Group

Props

Name

Type

Default

size

28 | 40 | 56 | 80

variant

'photo' | 'placeholder' | 'unknown' | 'more'

'photo'

src

string

—

alt

string

—

initial

string

'A'

overflowLabel

string

'+2'

ring

'none'|'active'|'multi'|'seen'|'multi-seen'

'none'

showEditIcon

boolean

false

Code

import { Avatar, AvatarGroup } from '@/src/components/Avatar/Avatar'

// Photo — no ring
<Avatar size={40} variant="photo" src="/user.jpg" />

// Single status ring (active)
<Avatar size={40} variant="photo" src="/user.jpg" ring="active" />

// Multi status ring (dashed)
<Avatar size={40} variant="photo" src="/user.jpg" ring="multi" />

// Seen (solid grey)
<Avatar size={40} variant="photo" src="/user.jpg" ring="seen" />

// Placeholder with initial
<Avatar size={40} variant="placeholder" initial="A" />

// With edit icon
<Avatar size={56} variant="photo" src="/user.jpg" showEditIcon />

// Avatar group (−12 px overlap)
<AvatarGroup avatars={[
  { size: 40, variant: 'photo', src: '/user.jpg' },
  { size: 40, variant: 'photo', src: '/user.jpg', ring: 'active' },
  { size: 40, variant: 'more', overflowLabel: '+2' },
]} />