Avatar Group

Usage

To display a group of avatars together, wrap avatars in an <AvatarGroup>.

A

J

R

import { AvatarGroup } from "stylus-ui/AvatarGroup";
import { Avatar } from "stylus-ui/Avatar";

const myUsers = [
  { name: "Alejandro", userId: "1" },
  { name: "James", userId: "2" },
  { name: "Roberta", userId: "3" },
];

export default () => (
  <AvatarGroup>
    {myUsers.map((user) => (
      <Avatar uuid={user.userId}>{user.name}</Avatar>
    ))}
  </AvatarGroup>
);

Sizing

You can adjust the size of all avatars in a group by setting the size.

A

J

R

import { AvatarGroup } from "stylus-ui/AvatarGroup";
import { Avatar } from "stylus-ui/Avatar";

const myUsers = [
  { name: "Alejandro", userId: "1" },
  { name: "James", userId: "2" },
  { name: "Roberta", userId: "3" },
];

export default () => (
  <AvatarGroup size="lg">
    {myUsers.map((user) => (
      <Avatar uuid={user.userId}>{user.name}</Avatar>
    ))}
  </AvatarGroup>
);

Visible count

By default, only three avatars will display. If you have more users you want to show, increment the total count.

A

J

R

T

D

import { AvatarGroup } from "stylus-ui/AvatarGroup";
import { Avatar } from "stylus-ui/Avatar";

const myUsers = [
  // The first three avatars display by default.
  { name: "Alejandro", userId: "1" },
  { name: "James", userId: "2" },
  { name: "Roberta", userId: "3" },

  // Setting total={5} will show Thalía and Daniela...
  { name: "Thalía", userId: "4" },
  { name: "Daniela", userId: "5" },

  // ...but no others.
  { name: "Cara", userId: "6" },
  { name: "Roan", userId: "7" },
];

export default () => (
  <AvatarGroup total={5}>
    {myUsers.map((user) => (
      <Avatar uuid={user.userId}>{user.name}</Avatar>
    ))}
  </AvatarGroup>
);

Overflow count

If there are more avatars than can be displayed, set hasOverflow to true. It will calculate and show a count of the avatars hidden from view.

A

J

R

T

D

+2

import { AvatarGroup } from "stylus-ui/AvatarGroup";
import { Avatar } from "stylus-ui/Avatar";

const myUsers = [
  // Although 5 avatars are visible...
  { name: "Alejandro", userId: "1" },
  { name: "James", userId: "2" },
  { name: "Roberta", userId: "3" },
  { name: "Thalía", userId: "4" },
  { name: "Daniela", userId: "5" },

  // ...hasOverflow calculates and shows there are +2 more
  { name: "Cara", userId: "6" },
  { name: "Roan", userId: "7" },
];

export default () => (
  <AvatarGroup total={5} hasOverflow>
    {myUsers.map((user) => (
      <Avatar uuid={user.userId}>{user.name}</Avatar>
    ))}
  </AvatarGroup>
);

If you want to directly specify a count instead of passing in children, use totalEntityCount.

A

J

R

T

D

+95

import { AvatarGroup } from "stylus-ui/AvatarGroup";
import { Avatar } from "stylus-ui/Avatar";

const myUsers = [
  { name: "Alejandro", userId: "1" },
  { name: "James", userId: "2" },
  { name: "Roberta", userId: "3" },
  { name: "Thalía", userId: "4" },
  { name: "Daniela", userId: "5" },
];

export default () => (
  <AvatarGroup total={5} totalEntityCount={100} hasOverflow>
    {myUsers.map((user) => (
      <Avatar uuid={user.userId}>{user.name}</Avatar>
    ))}
  </AvatarGroup>
);

API Reference

AvatarGroup

Renders a group of avatars.

hasOverflow

boolean

Will show overflow indicator of extra avatars.

---

size

"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "sm"

Sets size of avatars. Used to generate height/width of group.

---

theme

"light" | "dark" = "light"

Changes avatar colors based on background AvatarGroup is on. dark will show light avatars and vise versa.

---

total

number = 3

Total number of avatars shown. Used for calculating the number of extra avatars.

---

totalEntityCount

number

Total number of entities even if not passed in as Avatars. Necessary if the full list of entities is not passed in as children.

---