AvatarLabelGroup

<AvatarLabelGroup>TailwindCSS Modules

Combines an Avatar with a title and optional subtitle text. Handles text truncation automatically.

InstallationColoxo CLI

npx coloxo add avatar-label-group --style coloxo-css

ES Module ImportPlayground / npm package

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

Design Tokens:

--cx-text-primary: #0F172A--cx-text-tertiary: #64748B--cx-radius-full: 9999px

1. Variant Matrix

AvatarLabelGroup supports all Avatar props (images, initials, statuses, squircle shapes).

Image (Title + Subtitle)	Initials (Title Only)	Status Indicator	Squircle
Default	Olivia Rhye olivia@untitledui.com	Olivia Rhye	Olivia Rhye olivia@untitledui.com	Olivia Rhye olivia@untitledui.com

Supports 3 specific sizes that scale both the avatar diameter and the typography together.

size="sm"

Dimensions: 32px (2rem)

Dropdown menus, dense lists

size="md"DEFAULT

Dimensions: 40px (2.5rem)

Olivia Rhye

olivia@untitledui.com

Standard tables, page headers

size="lg"

Dimensions: 48px (3rem)

Profile cards, hero sections

Size

Avatar Content

Status Indicator

Include Subtitle

Rounded Avatar

Visual Render CanvasHEIGHT: 40PX

tsx

1<AvatarLabelGroup2  title="Olivia Rhye"3  subtitle="olivia@untitledui.com"4  src="https://i.pravatar.cc/150?u=a042581f4e29026704a"5/>

Typography and avatar borders automatically adapt to dark backgrounds.

Truncation is built-in. If the container is too narrow, the title and subtitle will automatically append an ellipsis (...).

Narrow Container (200px)

Figure / Figcaption

The wrapper uses HTML <figure> and <figcaption> elements, providing standard semantic relationships between the avatar image and its label text.

Text Truncation

When text truncates via CSS ellipsis, ensure a native `title` attribute or tooltip is provided if the full text cannot be inferred elsewhere.

Name	Type	Default	Description
title	ReactNode	—	Primary label.
subtitle	ReactNode	—	Secondary label.
size	"sm" \| "md" \| "lg"	md	Avatar + type scale.