Skip to main content

Avatar

Displays a user photo or fallback initials.

Import

import { Avatar } from '@kikumi3n/ui';

Usage

<Avatar src="/photo.jpg" name="Jane Doe" />
<Avatar name="John Smith" /> {/* Shows "JS" initials */}
<Avatar /> {/* Shows default icon */}

Sizes

<Avatar name="User" size="sm" />
<Avatar name="User" size="md" />
<Avatar name="User" size="lg" />
<Avatar name="User" size="xl" />

API

PropTypeDefaultDescription
srcstringImage URL
namestringUser name (generates initials fallback)
size'sm' | 'md' | 'lg' | 'xl''md'Avatar size