A circular user or entity identity mark with initials, photo, and icon variants.

Avatar represents a user or entity with a circular container. It supports four content types — auto-generated initials, a photo, a person icon, or an organization icon — across six sizes. A badge slot lets you overlay any badge (e.g. a notification count).

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';
import { Avatar } from '@infinitibit_gmbh/ui';

<Avatar name="Emma Jones" size="md" />

Types

Initials

Pass a name prop — the Avatar auto-extracts the first letter of the first and last word (max 2 chars, uppercase). A single-word name yields one character.

EJASB

<Avatar name="Emma Jones" />   {/* → "EJ" */}
<Avatar name="Emma" />         {/* → "E" */}

Photo, Profile, Organization

<Avatar type="photo" src="https://example.com/photo.jpg" alt="Emma Jones" />
<Avatar type="profile" />
<Avatar type="organization" />

Sizes

Six sizes from 16 px (xxs) to 72 px (xl):

EEEEEE

Value	Diameter
`xxs`	16 px
`xs`	24 px
`sm`	32 px
`md` (default)	40 px
`lg`	52 px
`xl`	72 px

Badge slot

Pass any node to the badge prop to overlay it at the top-right corner — typically <BadgeNotificationCount>.

EJ3EJ99EJ

import { Avatar, BadgeNotificationCount } from '@infinitibit_gmbh/ui';

<Avatar name="Emma Jones" size="lg" badge={<BadgeNotificationCount count={3} />} />
<Avatar name="Emma Jones" size="lg" badge={<BadgeNotificationCount />} />

API

Prop	Type	Default	Description
`type`	`'initials' \| 'photo' \| 'profile' \| 'organization'`	`'initials'`	Content type.
`size`	`'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Container diameter.
`name`	`string`	—	Name source for auto-initials.
`src`	`string`	—	Photo URL (`type="photo"`).
`alt`	`string`	`''`	Alt text for photo image.
`badge`	`ReactNode`	—	Overlay slot (top-right).
`className`	`string`	—	Merged with the CVA class list.

Plus all native <span> attributes.

Server & client

Avatar is server-safe — no client-only hooks or state.

Accessibility

type="photo": the <img> uses the alt prop. Provide a descriptive alt (e.g. the person's name) or alt="" when the image is decorative and context is provided elsewhere.
type="initials": the text content is readable by screen readers. Supplement with an aria-label on the parent element when the initials alone lack context.
type="profile" and type="organization": inline SVGs are aria-hidden; use aria-label on the Avatar span when identity context is needed.

Avatar