Avatar
Data DisplayStable
User profile picture with fallback initials, optional badge, and group stacking. All exported from a single subpath.
Quick Import
import { Avatar } from "@cohere-ai/waypoint-ui/avatar";Live Preview
Loading Avatar...
Props
| Name | Type | Default | Description |
|---|---|---|---|
size (Avatar) | 'xs' | 'sm' | 'default' | 'lg' | 'default' | Avatar size (overridden by AvatarGroup context) |
size (AvatarGroup) | 'xs' | 'sm' | 'default' | 'lg' | 'default' | Applies size to all child avatars via context |
Examples
Basic Avatar
Avatar with image and initials fallback
1 import { Avatar, AvatarImage, AvatarFallback } from '@cohere-ai/waypoint-ui/avatar'; 2 3 <Avatar> 4 <AvatarImage src="https://example.com/user.jpg" alt="Jane Doe" /> 5 <AvatarFallback>JD</AvatarFallback> 6 </Avatar>
Avatar Sizes
All available avatar sizes
1 import { Avatar, AvatarFallback } from '@cohere-ai/waypoint-ui/avatar'; 2 3 <Avatar size="xs"><AvatarFallback>XS</AvatarFallback></Avatar> 4 <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar> 5 <Avatar><AvatarFallback>MD</AvatarFallback></Avatar> 6 <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
Avatar Group
Overlapping group of avatars with overflow count
1 import { AvatarGroup, AvatarGroupCount, Avatar, AvatarFallback } from '@cohere-ai/waypoint-ui/avatar'; 2 3 <AvatarGroup size="sm"> 4 <Avatar><AvatarFallback>JD</AvatarFallback></Avatar> 5 <Avatar><AvatarFallback>MK</AvatarFallback></Avatar> 6 <Avatar><AvatarFallback>AL</AvatarFallback></Avatar> 7 <AvatarGroupCount>+4</AvatarGroupCount> 8 </AvatarGroup>
Additional Resources
Accessibility
Note: Always provide alt text on AvatarImage. Provide meaningful text in AvatarFallback (initials at minimum).
Found an Issue?
If you've encountered a bug or have feedback about the Avatar component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.