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 This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
AvatarImage
Avatar image component This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
src | string | — | Source URL of the avatar image |
alt | string | — | Alt text for the avatar image |
className | string | — | Additional CSS classes to apply to the component |
AvatarFallback
Fallback content when image fails to load This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Fallback content (typically initials or icon) |
className | string | — | Additional CSS classes to apply to the component |
ComposedAvatar
Composed avatar with simplified API This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | 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 | — | Additional CSS classes to apply to the component |
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.