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/vue/components/Avatar";Examples
Overview
Text
Image
Icon
Overflow count
overflowCount
9
size
48
Sizing
size
48
Colors & variants
size
48
Roundness
roundness
size
48
Interactive
API
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Display name; used for text initial when no image/icon |
image-url | string | — | Absolute URL for image avatar |
Icon | Component | — | Icon component for icon avatar, bound as :Icon |
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 |
overflow-count | number | — | Show overflow count (e.g. +9) |
class | string | — | Applied to the avatar root |
@click | (event: MouseEvent) => void | — | Makes avatar interactive (renders a button) |
@pointerdown | (event: PointerEvent) => 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)