Components
Avatars and identity marks
Provide compact person identity across rows, threads and ownership controls.
On this page
Purpose and composition
Provide compact person identity across rows, threads and ownership controls.
Use with names and metadata in lists; never use color as the only identity.
Anatomy
| Part | Responsibility |
|---|---|
| Initials | Caller-provided text |
| Color | Tailwind class string |
| Ring | Default white/zinc-900 boundary |
Configuration and variants
| Input / variant | Contract |
|---|---|
| initials / color | Required; derive initials in parent when creating people |
| label | Optional aria-label and title |
| className | Source sizes from 28px to 80px; can remove or change ring |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Standalone | Readable initials |
| Stacked | Thread participants overlap with source ring separation |
| Owner | Dark neutral avatar with dark-theme text override |
Interaction and responsive behavior
- Avatar is an inline span; interactive wrappers provide button semantics.
- Use stable identity colors.
- Keep the accessible name on clickable participant wrappers.
Accessibility contract
- Avatar label does not create an interactive control.
- Check initials on every actual background.
Known implementation limits
Caller classes are concatenated by cn rather than utility-conflict resolution. Avoid incompatible class overrides unless their computed source behavior is verified.
Composition example
<Avatar initials="DP" color="bg-blue-600" label="Devon Park" />Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Avatar |
| lib/mock-data.ts | Source identity colors |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0