Avatar

Bring your users to life! Our Avatar gives your user a face, or an icon, or initials. You choose, we display

Example

1import { Avatar, FlexBox } from '@sugarcoat/ui';
2
3<FlexBox gap='3' justify='center'>
4  <Avatar
5    size='xs'
6    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
7  />
8
9  <Avatar
10    size='sm'
11    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
12  />
13
14  <Avatar
15    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
16  />
17
18  <Avatar
19    size='lg'
20    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
21  />
22
23  <Avatar
24    size='xl'
25    src='https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
26  />
27</FlexBox>
28

API Reference

It builds on top of Radix-UI Avatar

Component	Description
Avatar	Your digital persona. A visual representation, typically an image or an icon, that uniquely identifies a user or an entity in your UI.
AvatarGroup	The social circle. A component that clusters multiple Avatars together, perfect for displaying group or team members in your UI.

Component Properties

Avatar

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Avatar.
`color`	`string`	default	The color of the Avatar.
`shape`	`string`	circle	The shape of the Avatar.
`shadow`	`boolean`	true	Whether to display a shadow around the Avatar.
`inactive`	`boolean`	false	Whether to display the Avatar as inactive.
`src`	`string`	-	Image source for the Avatar.
`alt`	`string`	-	Alternate text for the Avatar image.

AvatarGroup

Prop	Type	Default	Explanation
`limit`	`number`	-	The maximum number of Avatars to display.
`number`	`number`	The number of Avatars that are not displayed.	The number that shows up when the number of Avatars exceeds the limit.
`colorOfNumber`	`string`	dark	The color of the number displayed when the number of Avatars

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius