Skip to main content

​
Usage

import { Avatar } from '@kivora/react';

<Avatar src="/user.jpg" alt="Alice Johnson" />

​
Examples

​
With Image

<Avatar src="/user.jpg" alt="Alice Johnson" size="md" />

​
Initials Fallback

<Avatar alt="Bob Smith" size="lg" />
When no image is provided or the image fails to load, Avatar automatically displays initials derived from the alt prop (first letters of first two words).

​
Custom Initials

<Avatar alt="Alice Johnson" initials="AJ" size="md" />

​
Sizes

<Avatar alt="User" size="sm" />

​
Props

​
src
string
Avatar image URL
​
alt
string
required
Alt text for the image, also used to derive initials
​
initials
string
Custom initials to display (overrides automatic derivation from alt)
​
size
'sm' | 'md' | 'lg' | 'xl'
default:"md"
Avatar size
​
className
string
Additional CSS classes

​
Accessibility

  • Avatar uses role="img" and aria-label for screen readers
  • The alt prop is required and used for accessibility
  • Images include proper alt text
  • Initials provide a meaningful fallback when images fail

Build docs developers (and LLMs) love

Get started for freeTalk to us