Forma 36

AvatarGroup

Give feedback

Avatars can be displayed as group. The maximum visible Avatars in a group will be 3. If there are more than 3 Avatars in the group, the rest of the Avatars will be shown inside a Menu with their Avatar image and name (the alt text).

Import

import { AvatarGroup } from '@contentful/f36-avatar';

Examples

Variants

The group can be rendered in two variations

  • spaced - default variant
  • stacked
function AvatarVariantsExample() {
  return (
    <div>
      <SectionHeading as="h3" marginBottom="spacingS">
        Avatar Group spaced with menu
      </SectionHeading>
      <AvatarGroup>
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Alex Taylor-Allister"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Casey Lee"
        />
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Tyler Brunnenberger"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Yasemin Ahmed"
        />
      </AvatarGroup>
      <SectionHeading as="h3" marginBottom="spacingS">
        Avatar Group stacked with menu
      </SectionHeading>
      <AvatarGroup variant="stacked">
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Alex Taylor-Allister"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Casey Lee"
        />
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Tyler Brunnenberger"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Yasemin Ahmed"
        />
      </AvatarGroup>
    </div>
  );
}
Open in Playground

Sizes

The group can be rendered in two different sizes

  • Small - 24px
  • Medium - 32px, default size
function AvatarVariantsExample() {
  return (
    <div>
      <SectionHeading as="h3" marginBottom="spacingS">
        Avatar Group in medium size
      </SectionHeading>
      <AvatarGroup>
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Alex Taylor-Allister"
        />
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Yasemin Ahmed"
        />
      </AvatarGroup>
      <SectionHeading as="h3" marginBottom="spacingS">
        Avatar Group in small size
      </SectionHeading>
      <AvatarGroup size="small">
        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Alex Taylor-Allister"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Casey Lee"
        />

        <Avatar
          src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=100&h=100"
          alt="Yasemin Ahmed"
        />
      </AvatarGroup>
    </div>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name

Type

Default

children
ReactElement<AvatarProps, string | JSXElementConstructor<any>> | ReactElement<AvatarProps, string | JSXElementConstructor<any>>[]

className
string

CSS class to be appended to the root element

maxVisibleChildren
number

size
"small"
"medium"

testId
string

A [data-test-id] attribute used for testing purposes

variant
"stacked"
"spaced"

Accessibility

The displayed menu for not rendered Avatars is keyboard accessible via tab and arrow keys. The menu items are not interactive.

Help improve this page

Edit on GithubRead the contribution guide