◎

Avatar

Display

Represents a user or entity. Displays a photo, or gracefully falls back to initials.

Preview

Jane Doe

No status

Code

VUE

<Avatar />

Props

Name

Full name — used for the initials fallback and alt text

Src

Image URL — leave empty to render initials

Size

Size of the avatar

Shape

Border radius shape

Status

Presence indicator badge

Props API

Prop	Type	Default	Required	Description
`name`	`string`	`"Jane Doe"`	—	Full name — used for the initials fallback and alt text
`src`	`string`	`""`	—	Image URL — leave empty to render initials
`size`	`select`"xs" \| "sm" \| "md" \| "lg" \| "xl"	`"md"`	—	Size of the avatar
`shape`	`select`"circle" \| "square"	`"circle"`	—	Border radius shape
`status`	`select`"none" \| "online" \| "offline" \| "busy" \| "away"	`"none"`	—	Presence indicator badge

For image-based avatars, provide square images for best results. The initials fallback uses a deterministic color derived from the name string.

Image avatars always include alt text derived from the name prop.
When used without an accompanying visible name, wrap in an element with aria-label.
Presence status badges include a visually hidden text description.