Flux

Avatar group ​

The Avatar group component stacks multiple avatars into an overlapping row, optionally collapsing the overflow into a "+N" chip. It is useful for showing the members of a team, the participants of a conversation, or the assignees of a task. Avatars placed in the default slot inherit the group's size, so they are sized uniformly without extra configuration. Avatars stack from left to right, and the gap between them is cut out rather than painted, so the group blends into any background.

Accessibility

The group is exposed with role="group"; pass aria-label to describe it for assistive technology. When avatars overflow, the "+N" indicator carries a tooltip listing the names of the hidden avatars (taken from their alt or fallback-initials), so the collapsed members remain discoverable.

Props

max?: number
The maximum number of avatars to display. Remaining avatars are summarized in a "+N" overflow chip.

overlap?: number
The fraction of the avatar size that each avatar overlaps the previous one.
Default: 0.3

size?: number
The size of the avatars in pixels. Avatars without their own size inherit this value.
Default: 32

Slots

default
The avatars to stack. Place FluxAvatar components here.

Examples ​

Basic

A basic stack of avatars.

<template>
    <FluxAvatarGroup>
        <FluxAvatar fallback-initials="BM"/>
        <FluxAvatar fallback-initials="JD"/>
        <FluxAvatar fallback-initials="AS"/>
    </FluxAvatarGroup>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxAvatarGroup } from '@flux-ui/components';
</script>

Overflow

A stack that collapses the overflow into a "+N" chip.

<template>
    <FluxAvatarGroup
        :max="3"
        :size="40">
        <FluxAvatar fallback-initials="BM"/>
        <FluxAvatar fallback-initials="JD"/>
        <FluxAvatar fallback-initials="AS"/>
        <FluxAvatar fallback-initials="KL"/>
        <FluxAvatar fallback-initials="MN"/>
        <FluxAvatar fallback-initials="PQ"/>
    </FluxAvatarGroup>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxAvatarGroup } from '@flux-ui/components';
</script>

Labelled

A labelled group whose "+N" indicator reveals the names of the hidden members on hover.

<template>
    <FluxAvatarGroup
        :max="3"
        :size="40"
        aria-label="Project members">
        <FluxAvatar
            alt="Mary Berry"
            fallback-initials="MB"/>
        <FluxAvatar
            alt="Paul Hollywood"
            fallback-initials="PH"/>
        <FluxAvatar
            alt="Prue Leith"
            fallback-initials="PL"/>
        <FluxAvatar
            alt="Noel Fielding"
            fallback-initials="NF"/>
        <FluxAvatar
            alt="Sandi Toksvig"
            fallback-initials="ST"/>
        <FluxAvatar
            alt="Matt Lucas"
            fallback-initials="ML"/>
    </FluxAvatarGroup>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxAvatarGroup } from '@flux-ui/components';
</script>

On a background

The gap between avatars is cut out, so the group works on any background colour.

<template>
    <div style="padding: 15px; background: var(--gray-100); border-radius: var(--radius)">
        <FluxAvatarGroup :max="4">
            <FluxAvatar src="https://i.pravatar.cc/64?img=11"/>
            <FluxAvatar src="https://i.pravatar.cc/64?img=12"/>
            <FluxAvatar fallback-initials="BM"/>
            <FluxAvatar fallback-initials="JD"/>
            <FluxAvatar fallback-initials="AS"/>
            <FluxAvatar fallback-initials="KL"/>
        </FluxAvatarGroup>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxAvatarGroup } from '@flux-ui/components';
</script>

Used components ​