Avatar Pair
ProTwo overlapping avatars representing a relationship between two entities — typically a sender and receiver, a mentor and mentee, or a primary and secondary user. The primary avatar is slightly larger and positioned behind, with the secondary avatar overlapping in the foreground.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Two overlapping avatars with the primary slightly larger. | Use for 1-on-1 messaging threads, mentor-mentee pairings, or transfer contexts. |
| With Status |
Usage Guidelines
Do
Provide an aria-label describing both users — "Conversation between Jane and John".
Don't
Use avatar pairs for more than two users — use Avatar Stack instead.
Do
Use consistent sizing with other avatar components in the same view.
Don't
Omit accessible labels — screen readers need to know who both users are.
Do
Position the primary user consistently (left/behind).
Don't
Use inconsistent ordering — always put the primary entity in the same position.
Code
Design Tokens
Accessibility
- The container needs aria-label describing both users and their relationship.
- Individual avatar alt text can be empty (alt="") when the container label provides context.
- If interactive, ensure the pair is focusable as a single unit.