AvatarProfilePhoto

<AvatarProfilePhoto>TailwindCSS Modules

A large, prominent profile photo designed for settings pages and profile headers. Features a distinct padded outer ring and drop shadow.

InstallationColoxo CLI

npx coloxo add avatar-profile-photo --style coloxo-css

ES Module ImportPlayground / npm package

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

Design Tokens:

--cx-brand-600: #2348FF--cx-bg-primary: #FFFFFF--cx-radius-full: 9999pxshadow: lg

1. Variant Matrix

Profile photos support high-resolution images, initials, and standard status badges scaled for large contexts.

Image	Initials	Status	Verified	Company Badge
Default		OR

Available in 3 specific large sizes. The padding ring scales proportionally with the image.

size="sm"

Outer Dimensions: 72px (4.5rem)

Settings panels, dense headers

size="md"DEFAULT

Outer Dimensions: 96px (6rem)

Standard profile pages

size="lg"

Outer Dimensions: 160px (10rem)

Hero sections, detailed profiles

Size

Content Type

Status Indicator

Corner Badge

Visual Render CanvasHEIGHT: 96PX

tsx

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

The padded ring and badges automatically switch to dark border colors.

The AvatarProfilePhoto is usually placed overlapping a cover image in profile pages.

Olivia Rhye

Product Designer

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.

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	md	72 / 96 / 160px outer.
status	"online" \| "offline" \| "busy" \| "away"	—	Presence dot. Mutually exclusive with verified/badge.
verified	boolean	—	Verified tick (Coloxo brand).
badge	ReactNode	—	Company/custom badge (e.g. AvatarCompanyIcon). Mutually exclusive with status/verified.