Avatar Group
Stacks user avatars into a single overlapping cluster, with a configurable stacking direction and one size for the whole group.
import { Avatar, AvatarGroup } from "@plexui/vue/components/Avatar";Examples
Overview
Stacking direction
stack
Group sizing
size
48
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode[] | — | The avatars of the group |
size | number | — | Size of all avatars in the group |
stack | "start" | "end" | "start" | Stacking direction |
class | string | — | Applied to the group container; other attributes are not forwarded |
Styling
Avatar Group 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)