Avatar
An avatar component for displaying user profile images with fallback support. Supports multiple sizes, square variants, and tooltips. Built on Radix UI primitives for accessibility.
Installation
Import
Usage
Use Avatar to display user profile images. Always provide alt text for accessibility. Use ComposedAvatar for simpler API. Choose appropriate sizes for your layout. Use square variant for non-user contexts. Add tooltips for additional user information. Use fallback content (initials or icons) when images are unavailable.
Design Guidelines
Maintain consistent avatar sizing throughout your application. Use appropriate sizes for different contexts (small for lists, larger for profiles). Group avatars with consistent spacing. Use border styling for avatar groups. Provide clear fallback content.
Basic Usage
Avatar with image and fallback
Composed Avatar
Using ComposedAvatar for simpler API
Sizes
Avatars with different sizes
Square Avatars
Square variant avatars
With Tooltips
Avatars with tooltip support
User Profile Card
User profile card with avatar and information
Team Member List
List of team members with avatars
Comment Thread
Comment section with user avatars
Avatar
Root avatar container packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
AvatarImage
Avatar image component packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
src | string | — | Source URL of the avatar image |
alt | string | — | Alt text for the avatar image |
className | string | — | packages.commonProps.className.description |
AvatarFallback
Fallback content when image fails to load packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | Fallback content (typically initials or icon) |
className | string | — | packages.commonProps.className.description |
ComposedAvatar
Composed avatar with simplified API packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
src | string | — | Source URL of the avatar image |
alt | string | — | Alt text for the avatar image |
size | number | 8 | Size of the avatar (Tailwind size scale) |
square | boolean | false | Whether the avatar should be square instead of circular |
icon | IconName | "user" | Icon to display in the fallback |
fallback | React.ReactNode | — | Custom fallback content (overrides icon) |
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | Tooltip content to display on hover |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Avatars include proper ARIA attributes. Always provide descriptive alt text. Screen readers announce avatar content. Use tooltips to provide additional context. Ensure sufficient color contrast for fallback content.