Colors
8 background colors — foreground auto-selected for contrast
Sizes & shapes
size prop (px) · square (default) · round
Avatar group
Overlap with negative margin — compose manually
+3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "" | Full name — first two words' initials are extracted and uppercased. |
| src | string | null | Image URL. When provided, renders an img instead of initials. |
| size | number | 44 | Square dimension in px. Font size scales automatically (size × 0.4). |
| color | "lime"|"pink"|"violet"|"yellow"|"blue"|"coral" | "lime" | Background fill. Foreground auto-chosen for contrast. |
| round | boolean | false | Fully rounded pill shape. |
Usage
import { Avatar } from "components/feedback/Avatar";
// Initials
<Avatar name="Maya Chen" color="lime" />
// Photo
<Avatar src="/avatars/maya.jpg" name="Maya Chen" size={60} />
// Round shape
<Avatar name="Zara Kim" color="pink" round />