Avatar
- The main component that wraps the avatar.
AvatarGroup
- The wrapper component for stacking multiple avatars.
import { Avatar , AvatarGroup } from "@dreamy-ui/react" ;
Photo by Quang Anh Ha Nguyen
< Avatar
src = "/asian-woman.webp"
name = "Woman"
/>
You can set the size of the avatar by using the size
prop.
< HStack >
< Avatar
size = "sm"
src = "/asian-woman.webp"
name = "Woman"
/>
< Avatar
size = "md"
src = "/asian-woman.webp"
name = "Woman"
/>
< Avatar
size = "lg"
src = "/asian-woman.webp"
name = "Woman"
/>
</ HStack >
AvatarGroup is a wrapper around Avatars that displays a number of avatars grouped together in a stack.
Use maxAvatars
prop to limit the number of avatars displayed.
< AvatarGroup maxAvatars = { 4 } >
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
< Avatar name = "Dream" />
</ AvatarGroup >