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.

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>

Used components ​