Avatar
Displays a user profile image or their initials as a fallback.
Live Demo
Sizes
Shapes
Auto-initials from alt text
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image source URL. |
alt | string | — | Alt text for the image; also used to auto-generate initials. |
fallback | string | — | Initials to display when no image is available. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the avatar. |
shape | 'circle' | 'square' | 'circle' | Shape of the avatar. |
Usage
import { Avatar } from '@ghiberti85/ui'
// With image
<Avatar src="/avatar.jpg" alt="Fernando Ghiberti" size="md" />
// With explicit fallback initials
<Avatar fallback="FG" size="md" />
// Auto-initials from alt text
<Avatar alt="Fernando Ghiberti" size="md" />
// → renders "FG"
// Sizes
<Avatar fallback="FG" size="xs" />
<Avatar fallback="FG" size="sm" />
<Avatar fallback="FG" size="md" />
<Avatar fallback="FG" size="lg" />
<Avatar fallback="FG" size="xl" />
// Square shape
<Avatar fallback="FG" shape="square" size="md" />