AvatarGroupCount() — ui Function Reference

Architecture documentation for the AvatarGroupCount() function in avatar.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AvatarGroupCount() — ui Function Reference

Dependency Diagram

graph TD
  9fb3b830_1b68_1c99_05e6_51b0f7e173f4["AvatarGroupCount()"]
  eefac934_0c5d_4afb_2430_f8162f214291["avatar.tsx"]
  9fb3b830_1b68_1c99_05e6_51b0f7e173f4 -->|defined in| eefac934_0c5d_4afb_2430_f8162f214291
  style 9fb3b830_1b68_1c99_05e6_51b0f7e173f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/ui-rtl/avatar.tsx lines 88–102

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}