Avatar
@xui/avatarA compact user/entity representation — image, text initials, or a projected icon, with an automatic fallback when the image fails. Group several with <xui-avatar-group> to overlap them, optionally collapsing past max.
Install
pnpm add @xui/avatar Add the barrel to a standalone component's imports:
import { XuiAvatarImports } from '@xui/avatar';
@Component({
imports: [XuiAvatarImports],
// …
})Examples
Variants
Loading preview…
<div class="flex items-center gap-3">
<xui-avatar src="https://i.pravatar.cc/80?img=12" alt="Photo" />
<xui-avatar text="JD" />
<xui-avatar text="AB" shape="square" />
<xui-avatar text="XL" size="xl" class="bg-primary text-primary-foreground" />
</div>Sizes
Loading preview…
<div class="flex items-center gap-3">
<xui-avatar text="S" size="sm" />
<xui-avatar text="M" size="md" />
<xui-avatar text="L" size="lg" />
<xui-avatar text="XL" size="xl" />
</div>Fallback
Loading preview…
<div class="flex items-center gap-3">
<xui-avatar src="/does-not-exist.png" text="JD" />
<span class="text-foreground-muted text-sm">← broken image falls back to initials</span>
</div>Group
Loading preview…
<xui-avatar-group [max]="3">
<xui-avatar src="https://i.pravatar.cc/80?img=1" />
<xui-avatar src="https://i.pravatar.cc/80?img=2" />
<xui-avatar text="CD" class="bg-info text-info-foreground" />
<xui-avatar text="EF" />
<xui-avatar text="GH" />
</xui-avatar-group>API
Overlaps a set of {@link XuiAvatar}s into a stack. With max, only the first max avatars show and the rest collapse into a trailing +N avatar.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''maxnumberMaximum avatars to show before collapsing the rest into +N (0 = no limit).0shapeXuiAvatarVariants['shape']Shape/size applied to the trailing +N avatar.this.config.shapesizeXuiAvatarVariants['size']Size of every avatar in the group, including the overflow counter.this.config.sizeA compact user/entity representation: an image, text initials, or projected icon. Falls back to the text/icon when the image fails to load.
Variants
shapecirclesizemdInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''srcstringImage URL. Falls back to text/projected content on load error.altstringAlternative text for the image, and the avatar's accessible name. Falls back to text when unset; leave both empty for a purely decorative avatar.''textstringInitials or short text shown when there is no image.shapeXuiAvatarVariants['shape']Round or square-cornered.this.config.shapesizeXuiAvatarVariants['size']Diameter, with the initials scaled to match.this.config.size