Avatars

Avatar primitives for profile photos, groups, duos, and labeled identity patterns across the product.

Installation

npx chilli@latest add avatar

Avatar

Avatar Group

AB

CD

+1

Avatar Duo

Avatar Label

UsernameSupporting text

UsernameSupporting text

UsernameSupporting text

UsernameSupporting text

L

UsernameSupporting text

L

UsernameSupporting text

L

UsernameSupporting text

L

UsernameSupporting text

Username only

A

No subtitle

API Reference

Avatar

Prop	Type	Default	Description
`src`	`string`	`—`	The image source URL.
`alt`	`string`	`—`	Alternative text for the image.
`fallback`	`string`	`"?"`	Text displayed when no image is available.
`size`	`"xxsm" \| "xsm" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl"`	`"md"`	The size of the avatar.
`className`	`string`	`—`	Additional CSS classes.

AvatarGroup

Prop	Type	Default	Description
`avatars`	`Array<{ src?: string; fallback?: string; alt?: string }>`	`[]`	List of avatars to display.
`size`	`"xxsm" \| "xsm" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	The size shared by all avatars in the group.
`max`	`number`	`all avatars`	Maximum number of visible avatars before showing an overflow count.
`spacing`	`number`	`auto`	Optional custom overlap between avatars.
`showAddButton`	`boolean`	`false`	Displays the trailing circular add button shown in the Figma design.

AvatarDuo

Prop	Type	Default	Description
`primarySrc`	`string`	`—`	Image source for the front avatar.
`primaryFallback`	`string`	`"?"`	Fallback text for the front avatar.
`secondarySrc`	`string`	`—`	Image source for the back avatar.
`secondaryFallback`	`string`	`"?"`	Fallback text for the back avatar.
`size`	`"xxsm" \| "xsm" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The size preset of the duo container.

AvatarLabel

Prop	Type	Default	Description
`src`	`string`	`—`	The image source URL.
`fallback`	`string`	`"?"`	Fallback text displayed inside the avatar.
`name`	`string`	`—`	Primary label shown next to the avatar.
`supportingText`	`string`	`—`	Optional secondary text shown below the name.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	The size of the avatar label layout.