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, Flex } from '@haktos/sugarcoat-ui';
2
3<Flex 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</Flex>
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