Avatar
User avatar component with image support and fallback to initials or first letter.
Basic Usage
JD
?
import { Avatar } from 'uiplex';
<Avatar name="Jane Doe" size="md" />
<Avatar size="md" />With Name (Initials Fallback)
JD
JS
A
<Avatar name="Jane Doe" size="md" />
<Avatar name="John Smith" size="lg" />
<Avatar name="A" size="sm" />Sizes
U
U
U
<Avatar name="User" size="sm" />
<Avatar name="User" size="md" />
<Avatar name="User" size="lg" />Custom Colors
J
A
X
J
<Avatar name="JD" backgroundColor="#3b82f6" color="white" />
<Avatar name="AB" backgroundColor="#10b981" color="white" />
<Avatar name="XY" backgroundColor="#8b5cf6" color="white" />
<Avatar name="Jane" backgroundColor="#ec4899" color="white" />With Image
<Avatar
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane"
alt="Jane"
size="md"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | null | - | Image URL for the avatar |
| alt | string | "" | Alt text for the image |
| name | string | - | Name used for initials fallback when image fails or is missing |
| size | "sm" | "md" | "lg" | "md" | Avatar size |
| backgroundColor | string | - | Custom background color for fallback (e.g. "red", "#3b82f6") |
| color | string | - | Custom text color for fallback |
| className | string | "" | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |