Avatar Item

Combines an Avatar with a name and optional description in a horizontal row. Optionally clickable.

ExamplesCodeUsageChangelog

Basic

JS

Jane SmithPlant Manager

Tailwind v4

<AvatarItem name="Jane Smith" description="Plant Manager" />

With image

Sarah ChenShift Supervisor

Tailwind v4

<AvatarItem name="Sarah Chen" description="Shift Supervisor" avatar-src="/avatars/sarah.jpg" />

As a link

MT

Mike TorresEquipment Operator

Tailwind v4

<AvatarItem name="Mike Torres" description="Equipment Operator" href="/users/mike" />

In a list

JS

Jane SmithPlant Manager

MT

Mike TorresEquipment Operator

SC

Sarah ChenShift Supervisor

Tailwind v4

<AvatarItem v-for="user in users" :key="user.id" :name="user.name" :description="user.role" />

Props

Prop	Type	Default	Description
name	string	—	Required. User name
description	string	—	Secondary line (role, email, etc.)
avatarSrc	string	—	Avatar image URL
avatarSize	'small' | 'medium'	'medium'	Avatar size
avatarStatus	'online' | 'busy' | 'offline'	—	Presence dot
href	string	—	Makes item a link
disabled	boolean	false	Dims and disables interaction