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
W
<Avatar
src="/asian-woman.webp"
name="Woman"
/>You can set the size of the avatar by using the size prop.
W
W
W
<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.
+4
D
D
D
D
<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>