Skip to main content
Urbicon UI
source

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
24 props

No matching properties

No matching properties

05 Installation

Import

Loading...
Loading syntax highlighting...