Display

Avatar group

Overlapping avatars for a team, a thread or the readers of a page. Past a few, the rest fold into “+N”, which opens the full list.

Installation

npx sinaui add avatar-group

Copy src/lib/ui/AvatarGroup.svelte, with Avatar.svelte, Tooltip.svelte, Popover.svelte and tokens.css. No dependencies.

Examples

Readers of a manuscript

Point at the group and it fans out; point at a face for the name. Press +3 for everyone else.

<script lang="ts">
	import AvatarGroup from '#lib/ui/AvatarGroup.svelte';

	const readers = [
		{ name: 'Ibn Sina' },
		{ name: 'Fatima al-Fihri' },
		{ name: 'Al-Khwarizmi' },
		{ name: 'Maryam al-Asturlabi' },
		{ name: 'Ibn al-Haytham' },
		{ name: 'Al-Biruni' },
		{ name: 'Lubna of Córdoba' }
	];
</script>

<AvatarGroup people={readers} label="7 readers" />

Small

For lists and dense rows.

<script lang="ts">
	import AvatarGroup from '#lib/ui/AvatarGroup.svelte';

	const circle = [{ name: 'Thabit ibn Qurra' }, { name: 'Hunayn ibn Ishaq' }, { name: 'Al-Kindi' }];
</script>

<AvatarGroup people={circle} size="sm" label="Translators" />

Large

For headers and profile pages.

<script lang="ts">
	import AvatarGroup from '#lib/ui/AvatarGroup.svelte';

	const circle = [{ name: 'Thabit ibn Qurra' }, { name: 'Hunayn ibn Ishaq' }, { name: 'Al-Kindi' }];
</script>

<AvatarGroup people={circle} size="lg" label="Translators" />

Props

Prop	Type	Default
`people`	`{ name, src? }[]` (required)
`max`	`number`: shown before “+N”	`4`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`label`	`string`: names the group	“N people”
`onselect`	`(person) => void`

Set --ring to the background color behind the group, so the gaps between faces match it.

Keyboard

Key	Does
`Tab`	Moves from face to face; each shows its name
`Enter` `Space`	On “+N”, opens the rest; Escape closes it

Accessibility

A group named with its count, so it's read as “7 readers” before the names.
Each face is named by its tooltip; the list behind “+N” has every other name.
Exactly one extra person shows as a face, never as “+1”.
With reduced motion, faces don't fan out or lift.