Skip to content

AvatarGroup size prop doesn't propagate to child Avatars #523

Description

@mehdibha

Problem

<AvatarGroup size="sm"> shrinks the child circles via the group slot (*:data-avatar:size-6), but each child Avatar still renders data-size="md" (its own default). Anything keyed off the avatar's own size group — e.g. the fallback's group-data-[size=sm]/avatar:text-xs — doesn't apply, so a "sm" group renders sm circles with md (14px) fallback text.

Repro

<AvatarGroup size="sm">
  <Avatar><AvatarFallback>AK</AvatarFallback></Avatar>
</AvatarGroup>

The circle is 24px but the fallback text stays text-sm. Workaround today: repeat size="sm" on every child Avatar (done in the landing Controls showcase card).

Suggested fix

Propagate the group's size to children (context or provider), so AvatarGroup size alone is enough — matching how the group already sizes AvatarGroupCount via group-data-[size=…]/avatar-group.

Source: www/src/registry/ui/avatar/base.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: registryRegistry source and generated output (www/src/registry)bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions