Presence Badge
Badges
Source and install need .
pnpm dlx shadcn@latest add @assembli/avatarAvatar
The everyday avatar on Base UI: the photo once loaded, else initials on a tint derived from the name, else a person icon. Six sizes, circle or rounded square, a status dot and count badge seated on the corner arc, and an active ring. AvatarGroup overlaps them left to right and collapses the rest into a +N chip whose tooltip lists the hidden names.
Props
Other props pass through to the root element.
src
string
name
string
The person's name: the accessible label, the source of the initials and the tint.
size
AvatarSize
Default
"md"shape
"circle" | "square"
Default
"circle"status
AvatarStatus
badge
number | React.ReactNode
A count (capped at 99+) or a short node in the top corner. 0 hides it.
active
boolean
Draws a ring with a gap, for the current speaker, the active account or a live story.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | – | |
| name | string | – | The person's name: the accessible label, the source of the initials and the tint. |
| size | AvatarSize | "md" | |
| shape | "circle" | "square" | "circle" | |
| status | AvatarStatus | – | |
| badge | number | React.ReactNode | – | A count (capped at 99+) or a short node in the top corner. 0 hides it. |
| active | boolean | – | Draws a ring with a gap, for the current speaker, the active account or a live story. |
