Avatar

Stable

An avatar component for displaying profile pictures, initials, or placeholder content with various sizes, shapes, and status indicators.

API Reference

Attribute	Description	Type	Default
`src`	Image URL for the avatar	string	`""`
`alt`	Alternative text for the image	string	`Avatar`
`text`	Text content for placeholder avatars (initials, etc.). Enables placeholder mode.	string	`""`
`size`	Size of the avatar	string	`md`
`shape`	Shape / border radius of the avatar	string	`rounded`
`mask`	Apply special mask shapes to the avatar	string	`""`
`online`	Shows green online status indicator	boolean	`False`
`offline`	Shows gray offline status indicator	boolean	`False`

size

xs sm md lg xl 2xl

shape

rounded square circle

mask

heart squircle hexagon triangle

Image alt text: always provide a descriptive alt value for image avatars. Use the person's name or a descriptive label rather than generic "Avatar".

Status indicators: online/offline states are conveyed visually only. Supplement with aria-label or visually hidden text when status is meaningful to the interaction.

Text avatars: text initials in placeholder mode are presentational. If the initials represent a user, ensure the surrounding context provides a full accessible name.

Examples

Usage


<c-avatar src="https://example.com/avatar.jpg" alt="User avatar" />

Basic Usage

<!-- Image avatar -->
<c-avatar src="https://example.com/avatar.jpg" alt="User avatar"></c-avatar>

<!-- Text avatar -->
<c-avatar text="JD"></c-avatar>

<!-- Custom content -->
<c-avatar>
  <c-icon name="user" size="24" />
</c-avatar>

Sizes

<c-avatar src="image.jpg" size="xs"></c-avatar>
<c-avatar src="image.jpg" size="sm"></c-avatar>
<c-avatar src="image.jpg" size="md"></c-avatar>
<c-avatar src="image.jpg" size="lg"></c-avatar>
<c-avatar src="image.jpg" size="xl"></c-avatar>
<c-avatar src="image.jpg" size="2xl"></c-avatar>

Shapes

<c-avatar src="image.jpg" shape="rounded"></c-avatar>
<c-avatar src="image.jpg" shape="square"></c-avatar>
<c-avatar src="image.jpg" shape="circle"></c-avatar>

Status Indicators

OFF

<c-avatar src="image.jpg" online></c-avatar>
<c-avatar src="image.jpg" offline></c-avatar>
<c-avatar text="ON" online></c-avatar>
<c-avatar text="OFF" offline></c-avatar>

Masked Avatars

<c-avatar src="image.jpg" mask="heart"></c-avatar>
<c-avatar src="image.jpg" mask="squircle"></c-avatar>
<c-avatar src="image.jpg" mask="hexagon"></c-avatar>
<c-avatar src="image.jpg" mask="triangle"></c-avatar>

Text Avatars

ABC

1K+

<c-avatar text="A" class="bg-neutral text-neutral-content"></c-avatar>
<c-avatar text="AB" class="bg-primary text-primary-content"></c-avatar>
<c-avatar text="ABC" class="bg-secondary text-secondary-content"></c-avatar>

Real-world Examples

User Profile Card

John Doe

Software Engineer

<div class="flex items-center gap-3">
  <c-avatar src="user.jpg" size="lg" shape="circle" online></c-avatar>
  <div>
    <div class="font-semibold">John Doe</div>
    <div class="text-sm opacity-70">Software Engineer</div>
  </div>
</div>

Avatar Group

<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <c-avatar src="user1.jpg" shape="circle"></c-avatar>
  <c-avatar src="user2.jpg" shape="circle"></c-avatar>
  <c-avatar src="user3.jpg" shape="circle"></c-avatar>
  <c-avatar text="+5" class="bg-neutral text-neutral-content" shape="circle"></c-avatar>
</div>