Avatar
An avatar for user identities that shows an initial, a photo or an icon, with overflow counts, semantic colors and roundness options.
import { Avatar } from "@plexui/ui/components/Avatar";Examples
Overview
T
W
WText
D
Image
T
Icon
Overflow count
Sizing
Colors & variants
Roundness
roundness
size
48
A
Interactive
API
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Display name; used for text initial when no image/icon |
imageUrl | string | — | Absolute URL for image avatar |
Icon | React.ComponentType | — | Icon component for icon avatar |
size | number | — | Width and height in pixels |
color | "primary" | "secondary" | "success" | "info" | "discovery" | "danger" | "secondary" | Semantic color for text/icon avatar |
variant | "soft" | "solid" | "soft" | Style variant |
overflowCount | number | — | Show overflow count (e.g. +9) |
className | string | — | Applied to the avatar root |
onClick | () => void | — | Makes avatar interactive (renders a button) |
onPointerDown | () => void | — | Makes avatar interactive (renders a button) |
Styling
Avatar reads these component tokens. Override them at any scope to restyle it:
--avatar-font-size-scaling: font size scaling (default0.5)--avatar-group-cutout-color: cutout color (defaultvar(--color-surface))--avatar-group-cutout-width: cutout width (default3px)--avatar-group-spacing: spacing (default-8px)--avatar-image-border-color: image border color (defaultlight-dark(var(--alpha-04), var(--alpha-15)))--avatar-overflow-font-size-scaling-one: overflow font size scaling one (default0.45)--avatar-overflow-font-size-scaling-three: overflow font size scaling three (default0.3)--avatar-overflow-font-size-scaling-two: overflow font size scaling two (default0.37)--avatar-radius: radius (defaultvar(--radius-full))--avatar-size: size (default28px)