General
Avatar
Avatar component for displaying user images, initials, or icons with size and color variants.
Overview
The Avatar component provides flexible user representation across the UI through profile images, auto-generated initials, or icon fallbacks. It intelligently extracts initials from names by taking the first letter of the first and last words (e.g., "Sebastian Kurt Langer" becomes "SL"). Four size variants (small, medium, large, extra large) use theme-controlled border radius values, while pale and solid color variants apply distinct background, icon, and text colors. Each theme provides custom placeholder images ensuring visual consistency when no user image is available.
Key Business & UX Benefits
- Builds trust and recognition by showing who is behind content or actions.
- Keeps layouts consistent with theme-aligned sizes and colors.
- Works without images via initials and placeholders so no broken states.
- Scales from comments to headers with one component.
Pro-Tip from Larry: Rely on initials and placeholders so avatars never look broken when images fail to load.
Usage
Avatar
Feature List
- Multiple sizes with theme-specific border radius
- Pale and solid color variants with theme colors
- Auto-generated initials from user name
- Theme-specific placeholder images
API Reference
Avatar
| Prop | Default | Type |
|---|---|---|
size | m | "s" | "m" | "xl" | "l" |
color | pale | "pale" | "solid" |
fallbackVariant | initials | FallbackVariant ("icon" | "initials" | "image") |
fallbackIcon | essentials/user | string |
name | string | |
src | string |