Avatar

Represents a user — shows a profile image or auto-generated initials with a consistent color derived from the name.

ExamplesCodeUsageChangelog

Basic

JS

MT

SC

DW

Tailwind v4

<Avatar name="Jane Smith" />
<Avatar name="Mike Torres" />

With image

Tailwind v4

<Avatar name="Sarah Chen" src="/avatars/sarah.jpg" size="large" />

Sizes

JS

JS

JS

JS

JS

Tailwind v4

<Avatar name="Jane Smith" size="xsmall" />
<Avatar name="Jane Smith" size="small" />
<Avatar name="Jane Smith" size="medium" />
<Avatar name="Jane Smith" size="large" />
<Avatar name="Jane Smith" size="xlarge" />

Square shape

JS

MT

SC

Tailwind v4

<Avatar name="Jane Smith" shape="square" />

Presence status

JS

MT

SC

Tailwind v4

<Avatar name="Jane Smith" status="online" />
<Avatar name="Mike Torres" status="busy" />
<Avatar name="Sarah Chen" status="offline" />

Loading skeleton

Tailwind v4

<Avatar name="?" :loading="fetching" />

As a link

JS

Tailwind v4

<Avatar name="Jane Smith" href="/users/jane" />

Props

Prop	Type	Default	Description
name	string	—	Required. Display name — used for initials and aria-label
src	string	—	Image URL. Initials shown if omitted
size	'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'	'medium'	Avatar dimensions
shape	'circle' | 'square'	'circle'	Border radius
status	'online' | 'busy' | 'offline'	—	Presence indicator dot
loading	boolean	false	Show skeleton pulse
color	string	—	Override initials background. Auto-derived from name if omitted
href	string	—	Makes the avatar a clickable link