avatar

Installation

Import Avatar primitives from `@/components/kamod-ui/avatar`.

pnpm add @kamod-ch/ui

import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/kamod-ui/avatar";

Usage

Place AvatarImage and AvatarFallback inside Avatar. The fallback stays visible until the image fires load; on error it shows again.

import { Avatar } from "@/components/kamod-ui/avatar";

<Avatar />

CN

Basic

Image plus fallback initials.

CN

Badge

AvatarBadge sits at the bottom-inline-end (logical end), overlaps the photo, and uses a thick white ring so the status dot reads clearly—same stacking as typical chat “online” indicators.

CN

Badge with icon

Put an icon inside the badge; small avatars hide inner SVG to save space.

CN

Avatar group

Overlap avatars with ring separation using AvatarGroup.

CN

LR

ER

Avatar group count

Append AvatarGroupCount for overflow (+N).

CN

LR

ER

+3

Group count with icon

Use an icon inside the count bubble (e.g. plus).

CN

LR

ER

Sizes

Use the size prop on Avatar (sm, default, lg).

CN

Dropdown

Use a ghost icon button as the dropdown trigger wrapping Avatar.

API Reference

Component overview.

Root container; size maps to data-size for badge scaling.

Prop	Type	Default
size	`"sm" \| "default" \| "lg"`	`"default"`
class	`string`	`-`

AvatarImage

Prop	Type	Default
src	`string`	`-`
alt	`string`	`""`
class	`string`	`-`

AvatarFallback

Prop	Type	Default
class	`string`	`-`

AvatarBadge

Prop	Type	Default
class	`string`	`-`

AvatarGroup

Prop	Type	Default
class	`string`	`-`

AvatarGroupCount

Prop	Type	Default
class	`string`	`-`

Accessibility Notes

Use Avatar with clear labels, keyboard-friendly interactions and semantic structure.