Avatar

A visual representation of a user or entity, displaying either an image or a fallback with initials. Built on Radix UI primitives and our design system.

Examples

1import { Avatar, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='3' justify='center'>
4  <Avatar
5    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
6    alt='Avatar'
7  />
8</FlexBox>
9

API Reference

It builds on top of Radix-UI Avatar

Component	Description
Avatar	A visual representation of a user or entity, displaying either an image or a fallback with initials.
Avatar.Group	A component that clusters multiple Avatars together, perfect for displaying group or team members.

Component Properties

Avatar

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Avatar.
`color`	`string`	default	The color scheme of the Avatar.
`shape`	`string`	circle	The shape of the Avatar.
`shadow`	`boolean`	true	Whether to show a shadow effect.
`inactive`	`boolean`	false	Whether the Avatar should appear inactive.
`src`	`string`	-	The image source URL.
`alt`	`string`	-	Alternative text for the image.

Avatar.Group

Prop	Type	Default	Explanation
`limit`	`number`	-	Maximum number of avatars to display.
`number`	`number`	-	Custom number to show in the overflow avatar.
`numberColor`	`string`	default	Color of the overflow avatar.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius