Avatar

Displays a user image, initials, or icon in a circular frame with optional status indicator.

Import

tsx

import { Avatar } from '@tac-ui/web';

Playground

Interactively configure the Avatar props below.

Size

Initials

Status

Animated

tsx

<Avatar size="md" initials="JD" />

Sizes

Four sizes from compact indicators to large profile displays.

tsx

<Avatar size="sm" src="/avatar.jpg" alt="User" />
<Avatar size="md" src="/avatar.jpg" alt="User" />
<Avatar size="lg" src="/avatar.jpg" alt="User" />
<Avatar size="xl" src="/avatar.jpg" alt="User" />

Initials

Text initials are shown when no image is provided.

tsx

<Avatar size="sm" initials="JD" />
<Avatar size="md" initials="AB" />
<Avatar size="lg" initials="CK" />
<Avatar size="xl" initials="MR" />

Icon Fallback

An icon is displayed when neither image nor initials are available.

tsx

<Avatar size="sm" icon={<User />} />
<Avatar size="md" icon={<User />} />
<Avatar size="lg" icon={<User />} />
<Avatar size="xl" icon={<User />} />

Status Indicator

A status dot on the bottom-right corner indicates online presence.

tsx

<Avatar size="sm" initials="JD" showStatus />
<Avatar size="md" src="/avatar.jpg" alt="User" showStatus />
<Avatar size="lg" initials="AB" showStatus />
<Avatar size="xl" src="/avatar.jpg" alt="User" showStatus />

Status with Content

Replace the status dot with custom icons for richer status indicators.

tsx

<Avatar size="md" src="/avatar.jpg" statusContent={<Camera />} statusColor="var(--primary)" />
<Avatar size="lg" initials="AB" statusContent={<Shield />} statusColor="var(--warning)" />
<Avatar size="xl" src="/avatar.jpg" statusContent={<Star />} statusColor="var(--error)" />

Status Colors

Change the status dot color to represent different states.

tsx

<Avatar size="lg" initials="ON" showStatus />
<Avatar size="lg" initials="AW" showStatus statusColor="var(--warning)" />
<Avatar size="lg" initials="OF" showStatus statusColor="var(--error)" />
<Avatar size="lg" initials="ID" showStatus statusColor="var(--muted-foreground)" />

Animated

Enable hover animation with a subtle lift and scale effect.

tsx

<Avatar size="md" initials="JD" animated />
<Avatar size="lg" src="/avatar.jpg" alt="User" animated showStatus />
<Avatar size="xl" initials="AB" animated />

API Reference

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Size of the avatar.
src	string	-	URL of the image to display. Falls back to initials or icon on error.
alt	string	-	Accessible alt text for the image.
initials	string	-	Text initials shown when no image is available.
icon	React.ReactNode	-	Icon node shown when no image or initials are available.
showStatus	boolean	false	Renders a status dot in the bottom-right corner.
statusContent	React.ReactNode	-	Custom content inside the status badge. Automatically shows the badge when provided.
statusColor	string	"var(--success)"	Background color for the status badge.
animated	boolean	false	Enables a subtle hover animation (lift and scale).
className	string	-	Additional CSS class names.