Size
size is the size of the Avatar.
JD
Jane Doe
md (default)
JD
Jane Doe
lg
Src
src is an image avatar instead of initials.
John Smith
Backend Engineer
First name
firstName supplies the first letter of the avatar's fallback initials, and is part of the image's alt text — so it's worth passing even when you have a src.
J
Jane
No last name set
Last name
lastName supplies the second initial, so the fallback reads as a monogram rather than a single letter.
J
First name only
JD
Both names
Status
status is a presence dot in the avatar's corner.
JD
online
JD
offline
JD
away
JD
dnd
JD
busy
Ring
ring is the ring color displayed around the Avatar.
JD
primary
JD
secondary
JD
success
JD
warning
JD
error
JD
info
JD
pending
JD
neutral
Shape
shape is the shape of the Avatar.
JD
Jane Doe
Circle (default)
JD
Jane Doe
Square avatar
Title
title is the primary line beside the avatar — usually the person's name.
JD
Jane Doe
Description
description is the secondary line under it — a role, a handle, an email.
JD
Jane Doe
Product Designer
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Prop
Type
Default
Description
string—
The image source URL displayed inside the Avatar. Falls back to initials, then a placeholder icon, if omitted or if the image fails to load.
string—
The person's first name, used to build the fallback initials and the image's alt text.
string—
The person's last name, used to build the fallback initials and the image's alt text.
"online" | "offline" | "away" | "dnd" | "busy"—
Status indicator badge displayed in the corner of the Avatar.
"primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral"—
The ring color displayed around the Avatar.