Avatars

Change the props and copy the result. The Avatar control picks the content form, and Primitives fills the badge slot.

Reach for the standard Avatar for almost everything. AvatarLabelGroup adds the name and detail line a people list needs, AvatarProfilePhoto is the oversized version for profile headers, AvatarGroup overlaps several people into one row, and AvatarAddButton is the one interactive member, for inviting people. The last four are the badge primitives the add-on props render, exported for composing your own. Each name links to its section below.

The core component: one circle, three content forms, and a single badge slot. The content form is not a prop you set; it is a fallback chain, so a photo avatar given initials degrades to them if the image fails. Every size and content combination follows, mirrored from the size union in avatar.tsx.

An avatar with the name and one detail line beside it, for people lists, account menus, and assignee rows. It always draws the avatar border, and every Avatar prop passes through, so status and verified work here too. Three sizes, mirrored from the size union in avatar-label-group.tsx.

The oversized member for profile headers and settings pages: a white ring, an elevation shadow at md and lg, and the same content fallback chain as Avatar. Its add-on badges render at the three largest indicator sizes, which exist for exactly this component. Three sizes, mirrored from the size union in avatar-profile-photo.tsx.

A row of overlapping avatars for showing who is on a project or thread. Each member wears the Figma sheet’s 1.5px separation ring as an internal border, neighbors tuck 4, 8, or 12px underneath, anyone past max collapses into a +N avatar, and addButtonTitle appends the invite button. DrumKit-authored: upstream ships no avatar group component, so avatar-group.tsx has no upstream counterpart and upgrades never touch it. Three sizes, matching the three smallest Avatar sizes.

The one interactive member: a dashed circular button that invites someone to the group of avatars it follows. It wraps its icon in a tooltip and reuses the tooltip title as the accessible name. Three sizes, mirrored from the size union in avatar-add-button.tsx, matching the three smallest Avatar sizes.

The pieces the add-on props render, exported for composing your own arrangements. The Figma status icon sheet names 5 types, which map onto 4 primitives: the online indicator carries the offline and online types, the company icon renders the avatar type using the sheet’s Layers placeholder artwork, and the verified tick and count badge are one type each. Each primitive runs its own scale across the avatar sizes: the indicator a 10px floor through md before stepping to 12, 14, and 16, the tick a 14px floor through md before stepping to 16, 18, and 20, and the company icon and count a 16px floor through lg before stepping to 18 and 20. Past nine, the count clamps to 9+ and widens into a pill with its side padding held constant.

Most of the family is static imagery with no interactive states. The two below are the ones that genuinely exist: the add button’s rest, hover, focus, and disabled states, and the focus ring a focusable avatar shows when its wrapping link has keyboard focus.