Components

Avatar Group

Overlapping stacked avatars with an overflow "+N" count.

php artisan blatui:add avatar-group

AL AT GH LT

@php
    $team = [
        ['name' => 'Ada Lovelace'],
        ['name' => 'Alan Turing'],
        ['name' => 'Grace Hopper'],
        ['name' => 'Linus Torvalds'],
        ['name' => 'Margaret Hamilton'],
    ];
@endphp

<x-ui.avatar-group :avatars="$team" :max="4" />

Images

@php
    $people = [
        ['src' => 'https://picsum.photos/seed/blatui-a/96', 'name' => 'Ada Lovelace'],
        ['src' => 'https://picsum.photos/seed/blatui-b/96', 'name' => 'Alan Turing'],
        ['src' => 'https://picsum.photos/seed/blatui-c/96', 'name' => 'Grace Hopper'],
        ['src' => 'https://picsum.photos/seed/blatui-d/96', 'name' => 'Linus Torvalds'],
        ['src' => 'https://picsum.photos/seed/blatui-e/96', 'name' => 'Katherine Johnson'],
        ['src' => 'https://picsum.photos/seed/blatui-f/96', 'name' => 'Margaret Hamilton'],
    ];
@endphp

<x-ui.avatar-group :avatars="$people" :max="4" />

Sizes

GH LT

@php
    $people = [
        ['src' => 'https://picsum.photos/seed/blatui-a/96', 'name' => 'Ada Lovelace'],
        ['src' => 'https://picsum.photos/seed/blatui-b/96', 'name' => 'Alan Turing'],
        ['src' => 'https://picsum.photos/seed/blatui-c/96', 'name' => 'Grace Hopper'],
        ['name' => 'Linus Torvalds'],
        ['name' => 'Margaret Hamilton'],
    ];
@endphp

<div class="flex flex-col items-start gap-6">
    <x-ui.avatar-group :avatars="$people" :max="4" size="sm" />
    <x-ui.avatar-group :avatars="$people" :max="4" />
    <x-ui.avatar-group :avatars="$people" :max="4" size="lg" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.avatar-group>.

Props

Prop	Type	Default	Description
`avatars`*	`array`	`[]`	The people to display, in order. Each renders an overlapping avatar; missing or failed images fall back to initials derived from the name. See Each avatar below.
`max`	`int`	`4`	Maximum number of avatars to render. Any remainder is collapsed into a trailing "+N" counter.
`size`	`string`	`'default'`	Avatar size, which also scales the overlap, ring width and initials text. `sm` `default` `lg`

* Required.

Each avatar

Prop	Type	Default	Description
`src`	`string`	—	Image URL for the avatar. Omit it to render initials only.
`name`	`string`	—	Person name, used for the title tooltip and to derive up-to-two-letter initials (e.g. "Ada Lovelace" becomes "AL") when no image is shown.