# Avatar: Linked group

> Render avatars as links with `render` and give each an `aria-label`. A focused avatar rises above its neighbours so the ring is never cut. Add `<AvatarGroupCount />` yourself when the total comes from your data.

Example: https://hextaui.com/docs/avatar/examples/linked-group
Component docs: https://hextaui.com/docs/avatar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/avatar-linked-group.json
```

This adds `components/examples/avatar/linked-group.tsx` with the Avatar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/avatar/linked-group.tsx"
"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  getInitials,
} from "@/components/ui/avatar"

const team = [
  "Ada Lovelace",
  "Alan Turing",
  "Grace Hopper",
  "Linus Torvalds",
  "Margaret Hamilton",
]

export function AvatarLinkedGroup() {
  return (
    <AvatarGroup aria-label="Team" size="lg">
      {team.map((name) => (
        <Avatar key={name} render={<a href="#" aria-label={name} />}>
          <AvatarFallback>{getInitials(name)}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount count={3} />
    </AvatarGroup>
  )
}
```

## Props in this example

### Avatar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<span>` |  |

### AvatarGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"xs" \| "sm" \| "default" \| "lg" \| "xl"` | `"default"` |  |

### AvatarGroupCount

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | – | Shown as +3, or 99+ above 99. |

## More Avatar examples

- [Sizes and shapes](https://hextaui.com/docs/avatar/examples/sizes.md)
- [Loading](https://hextaui.com/docs/avatar/examples/loading.md)
- [Initials](https://hextaui.com/docs/avatar/examples/initials.md)
- [Status](https://hextaui.com/docs/avatar/examples/status.md)
- [Group](https://hextaui.com/docs/avatar/examples/group.md)
- [Layout](https://hextaui.com/docs/avatar/examples/layout.md)
- [Right to left](https://hextaui.com/docs/avatar/examples/rtl.md)