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>
    <li>
      <Avatar aria-label='cat'>
        <img src='/img/component-docs/cats/cat1.webp' alt='' />
      </Avatar>
    </li>
    <li>
      <Avatar aria-label='briefcase'>
        <BriefcaseIcon />
      </Avatar>
    </li>
    <li>
      <Avatar aria-label='Søren Magnussen'>sm</Avatar>
    </li>
    <li>
      <Avatar aria-label='Mark Downright'>md</Avatar>
    </li>
    <li>
      <Avatar aria-label='Ola Nordman'>on</Avatar>
    </li>
  </EXPERIMENTAL_AvatarStack>
);

render(<Preview />)

Usage

To create an avatar stack in plain HTML, use the ds-avatar-stack class on a <ul>. Inside this, place <li> elements wrapping elements with the ds-avatar class. Use a trailing <li> with text to add an 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-radius	var(--dsc-avatar-stack-radius)
--dsc-avatar-size	var(--dsc-avatar-stack-size)
--dsc-avatar-stack-gap	2px
--dsc-avatar-stack-overlap	var(--ds-size-3)
--dsc-avatar-stack-radius	var(--ds-border-radius-full)
--dsc-avatar-stack-size	var(--ds-size-12)
--dsc-avatar-stack-suffix-gap	var(--ds-size-3)

Data Attributes
Name	Value
data-expandable	fixed

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.

Note: In browsers that do not support sibling-index(), data-expandable="fixed" will not render correctly if it contains more than 12 avatars.

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 a trailing <li> with text to indicate i.e. +5. 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">  <li>    <Avatar aria-label="Ola Nordmann">ON</Avatar>  </li>  <li>    <Avatar aria-label="Ola Nordmann" data-initials="ON" />  </li>  <li>    <Avatar aria-label="Ola Nordmann">      <img src="..." />    </Avatar>  </li></AvatarStack>;

EXPERIMENTAL_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.) @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
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.) @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
Type: string
Default: 'var(--ds-size-12)'

overlap
Description: A number which represents the percentage value of how much avatars should overlap. @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
Type: string | number
Default: 50

suffix
Description: Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'". @deprecated Please use a trailing `<li>` with text instead
Type: string

expandable
Description: Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded.
Type: boolean | "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.) @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
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.) @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
overlap	`string \| number`	50	A number which represents the percentage value of how much avatars should overlap. @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
suffix	`string`	-	Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'". @deprecated Please use a trailing `<li>` with text instead
expandable	`boolean \| "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 aria-label='contributors'>
        <li>
          <Tooltip content='Ola Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat1.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Kari Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat6.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Katt 2'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat1.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Børge Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>BK</a>
            </Avatar>
          </Tooltip>
        </li>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>Link + Tooltip expandable</legend>
      <EXPERIMENTAL_AvatarStack expandable='fixed' aria-label='contributors'>
        <li>
          <Tooltip content='Ola Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat6.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Kari Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat1.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Katt 2'>
            <Avatar aria-label='' asChild>
              <a href='#'>
                <img src='/img/component-docs/cats/cat6.webp' alt='' />
              </a>
            </Avatar>
          </Tooltip>
        </li>
        <li>
          <Tooltip content='Børge Katt'>
            <Avatar aria-label='' asChild>
              <a href='#'>BK</a>
            </Avatar>
          </Tooltip>
        </li>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
  </div>
);

render(<WithTooltipAndLink />)

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