Avatar

V 1.0View in Storybook

Circular avatar in 3 modes (image / icon / initials) × 4 sizes, with optional status notifier dot.

Playground

Type

Size

Status

Src

Initials

Alt

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-avatar--playground&viewMode=story&args=type%3Aicon%3Bsize%3Am%3Bstatus%3Abusy%3Bsrc%3Ahttps%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F32.jpg%3Binitials%3AHB%3Balt%3AAvatar

Code

<Avatar
  type="icon"
  size="m"
  status="busy"
  src="https://randomuser.me/api/portraits/men/32.jpg"
  initials="HB"
  alt="Avatar"
/>

Props

Name	Type	Default
`type`	`'image' \| 'icon' \| 'initials'`	`'icon'`
`size`	`'xs' \| 's' \| 'm' \| 'l'`	`'m'`
`status`	`'busy' \| 'online' \| 'away' \| 'offline'`	`'busy'`
`src`	`string`	`'https://randomuser.me/api/portraits/men/32.jpg'`
`initials`	`string`	`'HB'`
`alt`	`string`	`'Avatar'`

Usage guidelines

When to use

Use to represent a person or entity — profiles, comment threads, contact lists.
Choose initials when a photo isn't available; fall back to the icon type when even initials are unknown.
Show the status dot only when real-time presence data is available and relevant.

When not to use

Don't use for decorative imagery unrelated to identity.
Avoid the xs size for primary identity contexts; reserve it for dense lists or inline mentions.
Don't show a status dot without a real-time data source — stale status is worse than none.