Avatar

<Avatar>TailwindCSS Modules

A rich user avatar component supporting images, initials, placeholders, status indicators, verification badges, and company logos.

InstallationColoxo CLI

npx coloxo add avatar --style coloxo-css

ES Module ImportPlayground / npm package

import { Avatar } from '@coloxo/ui';

Design Tokens:

--cx-brand-100: #E0E7FF--cx-brand-700: #1D39CC--cx-slate-200: #E2E8F0--cx-radius-full: 9999px

1. Variant Matrix

Avatars support images (with fallback to initials), bare initials, and placeholders, with various indicators.

Image	Initials	Placeholder	Status	Verified	Company Badge	Count
Circle						C	3
Squircle						C	12

2. Control heights (Sizes)

The Avatar component supports 6 sizes ranging from 24px (xs) to 64px (2xl). Indicators scale proportionally.

Sizes

size="xs"

Dimensions: 24px (1.5rem)

Dense tables, inline text

size="sm"

Dimensions: 32px (2rem)

Secondary lists, dropdowns

size="md"DEFAULT

Dimensions: 40px (2.5rem)

Standard forms, page headers

size="lg"

Dimensions: 48px (3rem)

Hero sections, cards

3. Interactive Props Configurator

Size

Content Type

Status Indicator

Corner Badge

Rounded (Circle)

Border (Padding Ring)

Visual Render CanvasHEIGHT: 40PX

tsx

1<Avatar2  src="https://i.pravatar.cc/150?u=a042581f4e29026704a"3  alt="Olivia Rhye"4/>

4. Dark theme

Avatars update their borders, backgrounds, and status rings to contrast against dark backgrounds.

5. Enterprise layout compositions

Avatars are widely used in headers, profile cards, and data tables.

Olivia Rhye

olivia@untitledui.com

Accessibility

Image Alt Text

When using the `src` prop, always provide an `alt` prop with the user's name so screen readers can identify the image.

Accessible Labels

Status indicators (online/offline) and verified badges automatically inject an aria-label into their respective DOM nodes for screen readers.

Initials Fallback

If an image fails to load, the Avatar automatically removes the alt text from the wrapper and shows the initials text cleanly to screen readers.

Props

Name	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	md	Diameter 24–64px.
border	boolean	—	Outer border with padding.
contrastBorder	boolean	true	Inner contrast ring.
rounded	boolean	true	Full circle vs soft square.
status	"online" \| "offline" \| "busy" \| "away"	—	Presence indicator.
verified	boolean	—	Verified tick (Coloxo brand).
badge	ReactNode	—	Company logo badge (use AvatarCompanyIcon).
count	number	—	Count pill.
initials	string	—	Fallback initials.