Avatarparent
Use Avatar.Group for stacked avatar displaysAvatar
Visual representation of a user or entity
Setup
import { Avatar } from '@fragments-sdk/ui';Examples
Default
Avatar with image
Loading preview...
With Initials
Fallback when no image is provided
Loading preview...
Sizes
Available size options
Loading preview...
Custom Size
Set an exact avatar size
Loading preview...
Square Shape
Square variant for app icons or brands
Loading preview...
Group
Multiple avatars stacked together
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | Not set | Image source URL |
alt | string | | Alt text for the image |
initials | string | Not set | Fallback initials (1-2 characters) |
name | string | Not set | Full name - used to generate initials |
size | enumxssmmdlgxl | md | Size variant |
customSize | union | Not set | Custom avatar size (number in px or CSS size string like "2.25rem"), overrides size width/height |
shape | enumcirclesquare | circle | Shape variant |
color | string | Not set | Custom background color for fallback avatar |
imageStyle | object | Not set | Inline style object applied to the underlying image element |
imageProps | object | Not set | Additional props for the underlying img element (except src/alt/className/style) |
style | object | Not set | — |
Usage Guidelines
When to use
- Displaying user profile pictures
- Showing team member lists
- Representing entities in lists or cards
- User identification in comments or messages
When not to use
- Decorative images (use Image)
- Logo display (use Logo component)
- Large profile headers (use custom layout)
Best practices
- Always provide alt text or name for accessibility
- Use consistent sizes within the same context
- Provide fallback initials when image may not load
- Use Avatar.Group for multiple avatars in a row
- Use imageProps for advanced img attributes (loading, decoding, referrerPolicy, etc.)
Accessibility
- Include meaningful alt text describing the user
- Initials should be derived from name for screen readers
- Decorative avatars should have empty alt