Avatar
User profile images with fallback initials, status indicators, and configurable shapes.
JD
Loading...
Loading syntax highlighting...01 Examples
Mint micro-interactions
Mints only apply when the avatar is interactive (clickable, interactive, or onclick). Recommended: scale and glow — they read as 'this profile is tappable' without being playful. Avoid bounce, rotate, and wiggle on profile pictures — they undermine the calm a face conveys.
S
G
S
Loading...
Loading syntax highlighting...02 Customization
Team Row
Overlapping avatars with a children-based overflow counter.
A
B
C
D
+5
Loading...
Loading syntax highlighting...Custom Children
Use children to render arbitrary content instead of auto-generated initials.
42
!
Loading...
Loading syntax highlighting...Gradient Avatar
Use unstyled with children for fully custom styling.
FD
AK
ST
Loading...
Loading syntax highlighting...03 Accessibility
ARIA
The aria-label is derived from alt or name. Interactive avatars receive role="button". Purely decorative avatars can be
hidden via aria-hidden.
Keyboard
Interactive avatars are focusable via Tab and activate with Enter / Space. Non-interactive avatars are skipped in the tab order.
Image Fallback
When the image fails to load, the component falls back to children (if provided) or initials generated from name, ensuring content is always visible.
04 API Reference
24 props
Add filter
Grouping
Summary
Column visibility
No matching properties |
No matching properties
05 Installation
Import
Loading...
Loading syntax highlighting...