Components

Avatar stack

Avatar stack stacks a collection of avatar elements

Avatar stack is under development. If you have feedback or suggestions, please report them on Github or in Slack.

HTMLReact

Press Enter to start editing

Unable to parse html

const Preview = () => (
  <EXPERIMENTAL_AvatarStack>
    <Avatar aria-label='cat'>
      <img src='/img/component-docs/cats/cat1.webp' alt='' />
    </Avatar>
    <Avatar aria-label='briefcase'>
      <BriefcaseIcon />
    </Avatar>
    <Avatar aria-label='Søren Magnussen'>sm</Avatar>
    <Avatar aria-label='Mark Downright'>md</Avatar>
    <Avatar aria-label='Ola Nordman'>on</Avatar>
  </EXPERIMENTAL_AvatarStack>
);

render(<Preview />)

Usage

To create an avatar stack in plain HTML, use the ds-avatar-stack class on a <span>. Inside this, place elements with the ds-avatar class. Note that if you want to use data-expandable="fixed", the number of avatars must be specified via --dsc-avatar-count: <number> to correctly calculate the fixed width. Use data-suffix to add a text indicator for hidden avatars.

aria-label or aria-description can be used on avatar stack to provide context to screen readers about what the stack represents.

CSS variables and data attributes

Avatar stack uses its own CSS variables to control gap, size and overlap.

CSS Variables
Name	Value
--dsc-avatar-stack-size	var(--ds-size-12)
--dsc-avatar-stack-gap	2px
--dsc-avatar-stack-overlap	50
--dsc-avatar-count	initial
--dsc-avatar-size	var(--dsc-avatar-stack-size)
--dsc-avatar-font-size	var(--_font-size)

Data Attributes
Name	Value
data-expandable	fixed
data-suffix
data-variant	square

Examples

Expandable

data-expandable animates overlap to 0 on hover or focus. Use data-expandable="fixed" to expand with overflow without changing the physical width. tabindex="0" should be added, this is automatically added with expandable in React.

Indicating avatars not shown

Avatar stack does not support wrapping across multiple lines. If there are more avatars than can fit in the stack, you can use suffix to indicate this as text to the right of the stack. This automatically scales with the avatar size. You can also use an avatar with +xx as initials or child, but you should override the font size on this avatar with --dsc-avatar-font-size if there is to be room for two-digit or higher numbers.

Sizes

You cannot use data-size to change the size of avatars in an avatar stack. Instead, the size is controlled by setting the --dsc-avatar-stack-size variable.

Gap

Avatar stack uses CSS mask to create the visible space between avatars. This can be adjusted by setting the --dsc-avatar-stack-gap variable.

React

import {  EXPERIMENTAL_AvatarStack as AvatarStack,  Avatar,} from "@digdir/designsystemet-react";
<AvatarStack aria-label="contributors" avatarSize="2rem" overlap={40}>  <Avatar aria-label="Ola Nordmann">ON</Avatar>  <Avatar aria-label="Ola Nordmann" data-initials="ON" />  <Avatar aria-label="Ola Nordmann">    <img src="..." />  </Avatar></AvatarStack>;

gap
Description: Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
Type: string
Default: 2px

avatarSize
Description: Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
Type: string
Default: 'var(--ds-size-12)'

overlap
Description: A number which represents the percentage value of how much avatars should overlap.
Type: number
Default: 50

suffix
Description: Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
Type: string

expandable
Description: Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded.
Type: true | "fixed"
Default: undefined

Name	Type	Default	Description
gap	`string`	2px	Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
avatarSize	`string`	'var(--ds-size-12)'	Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
overlap	`number`	50	A number which represents the percentage value of how much avatars should overlap.
suffix	`string`	-	Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
expandable	`true \| "fixed"`	undefined	Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded.

Extra logic for links

Use asChild to make an avatar a link.

HTMLReact

Press Enter to start editing

Unable to parse html

const WithTooltipAndLink = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-4)' }}>
    <fieldset>
      <legend>Link + Tooltip</legend>
      <EXPERIMENTAL_AvatarStack overlap={20} aria-label='contributors'>
        <Tooltip content='Ola Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Katt 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Børge Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>BK</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>Link + Tooltip expandable</legend>
      <EXPERIMENTAL_AvatarStack
        overlap={50}
        expandable='fixed'
        aria-label='contributors'
      >
        <Tooltip content='Ola Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Katt 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Børge Katt'>
          <Avatar aria-label='' asChild>
            <a href='#'>BK</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
  </div>
);

render(<WithTooltipAndLink />)

Edit this page on github.com (opens in a new tab)