Avatar
A user avatar image, with circle and square shapes.
CircleS
SquareS
<template>
<Avatar shape="Circle" size="sm" />
</template>Props
| Name | Type | Default |
|---|---|---|
| src | string | — |
| alt | string | — |
| shape | "Circle" | "Square" | "Circle" |
| size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" |
Usage
AvatarGroup
An overlapping stack of avatars.
CBA
<template>
<UAvatarGroup>
<Avatar alt="A" />
<Avatar alt="B" />
<Avatar alt="C" />
</UAvatarGroup>
</template>LabeledAvatar
An avatar paired with a name, and an optional subtitle and status badge.
Subtitle + badge
S
Shadcn
StatusPro plan
Small size
S
Shadcn
<template>
<LabeledAvatar name="Shadcn" subtitle="Pro plan" :badge="true" />
</template>Props
| Name | Type | Default |
|---|---|---|
| name | string | — |
| subtitle | string | — |
| src | string | — |
| badge | boolean | false |
| size | "default" | "sm" | "default" |