AvatarGroup

Overlapping avatars with a count of the rest.

A static page with IzzyBlazor's script. No circuit.

A row of overlapping avatars, such as the people on a project. With Max, the rest collapse into a "+N" avatar.

Usage

razor

<AvatarGroup Max="3" Label="Project members">
    @foreach (var person in Members)
    {
        <Avatar Name="@person.Name" Src="@person.Photo" />
    }
</AvatarGroup>

Counting the rest

Use Max to show the first few avatars and count the rest in a +N avatar.

Preview Code

Preview

GHATALMHKJDRBL+3

Code

Max.razor

<AvatarGroup Max="4" Label="Project members">
    @foreach (var name in Members)
    {
        <Avatar Name="@name" />
    }
</AvatarGroup>

@code {
}

Sizes

Use Size on the group to size every avatar in it.

Preview Code

Preview

GH AT AL

D P S M F+2

Code

Sizes.razor

<Stack Gap="4" Align="Align.Center">
    <AvatarGroup Size="AvatarSize.Sm" Label="Reviewers">
        <Avatar Name="Grace Hopper" />
        <Avatar Name="Alan Turing" />
        <Avatar Name="Ada Lovelace" />
    </AvatarGroup>
    <AvatarGroup Size="AvatarSize.Lg" Max="3" Label="Teams">
        <Avatar Name="Design" Square />
        <Avatar Name="Platform" Square />
        <Avatar Name="Support" Square />
        <Avatar Name="Marketing" Square />
        <Avatar Name="Finance" Square />
    </AvatarGroup>
</Stack>

Details

Put the avatars directly inside the group: Max hides the extra ones with CSS, counting the group's children.

Mode support

What works in each mode, AvatarGroup
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders role="group", named by Label, such as "Project members".
Avatars past Max are hidden with display: none, so screen readers skip them too.
The "+N" avatar is an image named by MoreLabel, "3 more" by default.
The "+N" avatar isn't focusable, so the hidden names can't be reached; list everyone elsewhere if they matter.

Parameters

AvatarGroup parameters
Prop	Type	Default
`Max`How many avatars to show, from 1 to 10.	`int?`	`computed`
`Size`The size of every avatar in the group.	`AvatarSize`	`AvatarSize.Md`
`Label`The group's accessible name, such as "Project members".	`string?`
`MoreLabel`The "+N" avatar's accessible name, with {0} for the number.	`string?`	`"{0} more"`
`ChildContent`The avatars.	`RenderFragment?`

Plus 16 item props and 4 common props.

Full API