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

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
hasOverflow	boolean	false
size	"xxs""xs""sm""md""lg""xl""2xl""3xl"	"sm"
theme	"light""dark"	"dark"
total	number	3
totalEntityCount	number