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.

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>

Used components ​