Usage
import { AvatarGroup } from "@lemonsqueezy/wedges";<AvatarGroup
items={[
{
src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop",
alt: "Avatar 1",
},
{
src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop",
alt: "Avatar 2",
},
{
src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop",
alt: "Avatar 2",
},
]}
/>For more advanced usage, AvatarGroup.Root component can be used to compose your own group of AvatarGroup.Item.
<AvatarGroup.Root>
<AvatarGroup.Item
alt="Avatar 1"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
/>
<AvatarGroup.Item
alt="Avatar 2"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
/>
<AvatarGroup.Item
alt="Avatar 3"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
/>
<AvatarGroup.Label>3,000 followers</AvatarGroup.Label>
</AvatarGroup.Root>API Reference
AvatarGroup
| Prop | Value | Default |
|---|---|---|
items | AvatarGroupAvatarProps[] | / |
moreLabel | ReactNode | / |
previousOnTop | boolean | false |
size | "xs" | "sm" | "md" | | "lg" | "xl" | "2xl" | "md" |
AvatarGroup.Root
Includes all the props of the HTMLAttributes<HTMLDivElement>.
AvatarGroup.Item
Includes all the props of the Avatar component.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
initials | string | / |
notification | "primary" | "gray" | "green" | "yellow" | "red" | "gray" |
size | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl | "md" |
status | "primary" | "gray" | "green" | "yellow" | "red" | "gray" |
AvatarGroup.Label
Represents label in the avatar group. In addition to all the props defined as HTMLAttributes<HTMLDivElement>, AvatarGroup.Label component also includes the following props:
| Prop | Value | Default |
|---|---|---|
label | ReactNode | / |
size | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
The props type is defined as follows:
type AvatarMoreLabelProps = React.HTMLAttributes<HTMLDivElement> & {
label?: React.ReactNode;
size?: AvatarProps["size"];
};Examples
The following examples show the AvatarGroup component with different props.
The following example shows more advanced usage of the AvatarGroup component and how you can customize it with Tailwind CSS classes.
For automatic inheritance of background color for borders in AvatarGroup, use the wg-bg-{color} utility class on parent element instead of bg-{color}. For example: