Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Status

Add an accessible presence indicator to a generated Blobz avatar.

Status colours

Janaki Ammal avatarVikram Sarabhai avatarKalpana Chawla avatarSrinivasa Ramanujan avatar
View code
avatar-status-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { BlobAvatarStatus } from "@/components/blobz/avatar-status";

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;

export function AvatarStatusExample() {
	return (
		<div className="flex items-center gap-6">
			<BlobAvatarStatus
				alt={`${DEMO_PEOPLE.janakiAmmal} avatar`}
				name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
				palette={BLUE_PALETTE}
				size="xl"
				status="online"
			/>
			<BlobAvatarStatus
				alt={`${DEMO_PEOPLE.vikramSarabhai} avatar`}
				name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
				palette={BLUE_PALETTE}
				size="xl"
				status="away"
			/>
			<BlobAvatarStatus
				alt={`${DEMO_PEOPLE.kalpanaChawla} avatar`}
				name={getFirstName(DEMO_PEOPLE.kalpanaChawla)}
				palette={BLUE_PALETTE}
				size="xl"
				status="busy"
			/>
			<BlobAvatarStatus
				alt={`${DEMO_PEOPLE.srinivasaRamanujan} avatar`}
				name={getFirstName(DEMO_PEOPLE.srinivasaRamanujan)}
				palette={BLUE_PALETTE}
				size="xl"
				status="offline"
			/>
		</div>
	);
}

Installation

Register the Blobz registry once in your project, then install:

npx shadcn@latest add @blobz/avatar-status

The base Avatar component is installed automatically.

Usage

import { BlobAvatarStatus } from "@/components/blobz/avatar-status";

<BlobAvatarStatus
  alt="Janaki avatar"
  name="Janaki"
  status="online"
/>

Online uses green, away uses amber, busy uses destructive red, and offline uses a neutral gray. The indicator also uses role="status" and an accessible label, so status is not communicated by color alone. Supply statusLabel when the product uses different terminology.

Indicator positions

Position the indicator at any logical corner. Logical start and end values automatically follow the document direction.

Top start status positionTop start
Top end status positionTop end
Bottom start status positionBottom start
Bottom end status positionBottom end
View code
avatar-status-positions-example.tsx
import { BlobAvatarStatus } from "@/components/blobz/avatar-status";

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
const POSITIONS = [
	{ label: "Top start", position: "top-start" },
	{ label: "Top end", position: "top-end" },
	{ label: "Bottom start", position: "bottom-start" },
	{ label: "Bottom end", position: "bottom-end" },
] as const;

export function AvatarStatusPositionsExample() {
	return (
		<div className="grid grid-cols-2 gap-x-10 gap-y-8 sm:grid-cols-4">
			{POSITIONS.map(({ label, position }) => (
				<div className="flex flex-col items-center gap-3" key={position}>
					<BlobAvatarStatus
						alt={`${label} status position`}
						name={position}
						palette={BLUE_PALETTE}
						position={position}
						size="xl"
						status="online"
					/>
					<span className="text-muted-foreground text-xs">{label}</span>
				</div>
			))}
		</div>
	);
}

API

Prop

Type

Avatar

A server-renderable Blobz avatar with semantic shadcn size, frame, and surface variants.

Avatar Group

Compose overlapping Blobz avatars and a matching overflow count.

Theme

On this page

Status coloursInstallationUsageIndicator positionsAPI