Avatar Group — Wedges | Lemon Squeezy

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.

42k likes

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:

Wedges