Components

AvatarStack

AvatarStack stacks a collection of Avatar elements

Overview Code Accessibility

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

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.

Usage

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>;

Examples

Customization

AvatarStack is designed to be flexible enough to cover many different needs and use cases.

React

Press Enter to start editing

Unable to parse html

const Playground = () => {
  const [expandable, setExpandable] = useState<undefined | true>(undefined);
  const [square, setSquare] = useState(false);
  const [size, setSize] = useState(64);
  const [overlap, setOverlap] = useState(50);
  const [gap, setGap] = useState(2);
  const labelStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: 'var(--ds-size-2)',
    accentColor: 'var(--ds-color-base-default)',
  } as const;

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--ds-size-8)',
        minHeight: '370px',
      }}
    >
      <fieldset
        style={{
          display: 'grid',
          gridTemplateColumns:
            'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
          gap: 'var(--ds-size-4)',
        }}
      >
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-3)',
            alignItems: 'center',
          }}
        >
          <Checkbox
            label='Expandable'
            checked={expandable !== undefined}
            onChange={() => setExpandable((prev) => (prev ? undefined : true))}
          />
          <Checkbox
            label='square'
            checked={square}
            onChange={() => setSquare((prev) => !prev)}
          />
        </div>
        <Label style={labelStyle}>
          avatarSize {`${size}px`}
          <input
            min='24'
            max='150'
            step='0.1'
            type='range'
            value={size}
            onChange={(e) =>
              setSize(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
        <Label style={labelStyle}>
          Overlap {`${overlap}`}
          <input
            min='-10'
            max='100'
            step='1'
            type='range'
            value={overlap}
            onChange={(e) =>
              setOverlap(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
        <Label style={labelStyle}>
          Gap {`${gap}px`}
          <input
            min='0'
            max='15'
            step='1'
            type='range'
            value={gap}
            onChange={(e) =>
              setGap(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
      </fieldset>

      <EXPERIMENTAL_AvatarStack
        overlap={overlap}
        data-suffix={`+10`}
        gap={`${gap}px`}
        avatarSize={`${size}px`}
        expandable={expandable}
      >
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          md
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
      </EXPERIMENTAL_AvatarStack>
    </div>
  );
};

render(<Playground />)

Expandable

expandable animates overlap to 0 on hover or focus. Use expandable="fixed" to expand with overflow without changing the physical width.

Indicating avatars not shown

AvatarStack 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 AvatarStack. Instead, the size is controlled via the avatarSize prop on AvatarStack. This must be specified in a valid CSS length unit (px, em, rem, var(--ds-size-6), etc.).

React

Press Enter to start editing

Unable to parse html

const DataSize = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-8)' }}>
    <fieldset>
      <legend>avatarSize='var(--ds-size-8)'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize={'var(--ds-size-8)'}>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>avatarSize='3em'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize='3em'>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label=''>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
  </div>
);

render(<DataSize />)

Gap

AvatarStack uses CSS mask to create the visible space between avatars. The default is 2px but can be customized with gap

Links and Tooltips

Avatars in AvatarStack can have tooltips and be links, but be aware of accessibility considerations. Use asChild to make an Avatar a link.

React

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 Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 3'>
          <Avatar aria-label='' asChild>
            <a href='#'>BR</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>Link + Tooltip expandable</legend>
      <EXPERIMENTAL_AvatarStack
        overlap={50}
        expandable='fixed'
        aria-label='contributors'
      >
        <Tooltip content='Ola Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 3'>
          <Avatar aria-label='' asChild>
            <a href='#'>BR</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
  </div>
);

render(<WithTooltipAndLink />)

HTML

To create an AvatarStack in plain HTML, use the ds-avatar-stack class on a <figure>. 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.

<figure  class="ds-avatar-stack"  data-expandable="fixed"  style="--dsc-avatar-count: 3;"  tabindex="0"  aria-label="contributors"  data-suffix="+4">  <span class="ds-avatar" data-variant="circle" role="img" aria-label="">    <img alt="" aria-hidden="true" src="..." />  </span>  <span    class="ds-avatar"    data-variant="circle"    data-initials="ON"    role="img"    aria-label=""  ></span>  <span class="ds-avatar" data-variant="circle" role="img" aria-label="">    <span>ON</span>  </span></figure>

To override the default gap/size/overlap, use these CSS variables:

.ds-avatar-stack {  --dsc-avatar-stack-gap: 4px; /* default is 2px */  --dsc-avatar-stack-avatar-size: 3rem; /* default is var(--ds-size-12) */  --dsc-avatar-stack-overlap: 30; /* default is 50 */}

CSS variables and data attributes

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

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