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.

AL AT GH LT MH

"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>
  )
}

Add this example

This adds the example as components/examples/avatar/linked-group.tsx, together with the Avatar component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/avatar-linked-group.json

To add only the component, follow the Avatar installation.

Props in this example

The Avatar props this example sets, from the API reference.

Avatar

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

AvatarGroup

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

AvatarGroupCount

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

Every prop is in the Avatar API reference.

More Avatar examples

See them all, with keyboard support and accessibility notes, on the Avatar page.