# Avatar Group

> Stacked avatars with an overflow count.

## Examples

### Capped

`max` includes the “+N” chip: with `max` 4, you get three avatars and “+3”.

```vue
<script setup lang="ts">
const people = [
  { id: 1, name: "Ada Lovelace", src: "/avatars/ada.svg" },
  { id: 2, name: "Grace Hopper", src: "/avatars/grace.svg" },
  { id: 3, name: "Alan Turing" },
  { id: 4, name: "Katherine Johnson", src: "/avatars/katherine.svg" },
  { id: 5, name: "Margaret Hamilton" },
  { id: 6, name: "Linus Torvalds" },
];
</script>

<template>
  <UiAvatarGroup
    :items="people"
    :max="4"
    :overflow-label="(count) => `${count} more collaborators`"
  />
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `AvatarItem[]` | `[]` | People to show, in order. |
| `max` | `number` | — | Most circles to show, counting the "+N" chip: `max` 4 shows 3 avatars and "+N". |
| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size passed to every avatar. |
| `overflowLabel` | `((count: number) => string)` | — | Spoken name of the "+N" chip, e.g. `(n) => \`${n} more recipients\``. Defaults to the `moreAvatars` translation. |

Types:

```ts
export interface AvatarItem {
  name: string;
  src?: string;
  id?: string | number;
}
```

## Styling

- Parts (`[data-part="…"]`): `avatar-group`, `avatar`, `avatar-image`
- State attributes: `data-avatar-size`, `data-avatar-overflow`

## Accessibility

- Screen readers hear the “+N” chip as “3 more”. Use `overflow-label` to say more, e.g. “3 more people”.