TkxAvatar

Sizes (xs → xl)

import { TkxAvatar } from 'tekivex-ui';

<TkxAvatar src="/path/to/photo.jpg" alt="Aisha Khan" />

Initials fallback

Initials fallback (no src)

When src fails or isn’t provided, the avatar renders initials derived from alt:

<TkxAvatar alt="Aisha Khan" />            {/* renders "AK" */}
<TkxAvatar alt="Marcus Lee" />            {/* renders "ML" */}
<TkxAvatar alt="李伟" />                   {/* renders "李" */}

The colour is derived from the name hash, so each user consistently gets the same background.

Sizes

<TkxAvatar size="xs" {...props} />   {/* 24px */}
<TkxAvatar size="sm" {...props} />   {/* 32px */}
<TkxAvatar size="md" {...props} />   {/* 40px (default) */}
<TkxAvatar size="lg" {...props} />   {/* 56px */}
<TkxAvatar size="xl" {...props} />   {/* 80px */}

Custom size:

<TkxAvatar size={64} {...props} />

Status dot

Status indicators

<TkxAvatar src="..." alt="..." status="online" />
<TkxAvatar src="..." alt="..." status="busy" />
<TkxAvatar src="..." alt="..." status="away" />
<TkxAvatar src="..." alt="..." status="offline" />

Avatar group

Compose multiple avatars with overlap and an overflow count:

import { TkxAvatarGroup } from 'tekivex-ui';

<TkxAvatarGroup max={3}>
  <TkxAvatar alt="Aisha Khan" src="..." />
  <TkxAvatar alt="Marcus Lee" src="..." />
  <TkxAvatar alt="Priya Sharma" src="..." />
  <TkxAvatar alt="Dan Choi" src="..." />
  <TkxAvatar alt="Eve Park" src="..." />
</TkxAvatarGroup>
{/* renders 3 avatars + "+2" pill */}

Shape

<TkxAvatar shape="circle" {...props} />   {/* default */}
<TkxAvatar shape="rounded" {...props} />  {/* rounded square */}
<TkxAvatar shape="square" {...props} />

RSC compatible

TkxAvatar uses no hooks. Safe for Next.js Server Components.

Accessibility

• alt is required and used both as <img alt> and as the source for the initials fallback. Never use the empty string — it makes the avatar invisible to screen readers.
• The status dot is decorative (aria-hidden); convey status text in the surrounding context if it matters.

Props

Prop	Type	Required	Description
src	string		Image URL.
alt	string	yes	Accessibility text + initials source.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | number		Defaults to md.
shape	'circle' | 'rounded' | 'square'		Defaults to circle.
status	'online' | 'busy' | 'away' | 'offline'		Status dot.
bgColor	string		Override the auto-derived initials background.

Source

src/components/TkxAvatar.tsx