Avatar

Import

import { Avatar } from 'tuimorphic';

<Avatar src="/user.jpg" alt="John Doe" />

Prop	Type	Default	Description
src	`string`	-	Image source URL
alt	`string`	`''`	Alt text for the image
initials	`string`	-	Initials to display when no image is provided or image fails to load
size	`'small' \| 'medium' \| 'large'`	`'medium'`	Size variant
href	`string`	-	Optional link URL - renders as anchor when provided
target	`string`	-	Link target (e.g., "_blank")
className	`string`	-	Additional CSS class names

<Avatar src="/user.jpg" alt="John Doe" />

JDABXY

<Avatar initials="JD" />

<Avatar src="/user.jpg" alt="Profile" href="/profile" />
<Avatar src="/user.jpg" href="/profile" target="_blank" />

SMMDLG

<Avatar initials="SM" size="small" />
<Avatar initials="MD" size="medium" />
<Avatar initials="LG" size="large" />

<div style={{ display: 'flex', gap: '8px' }}>
  <Avatar initials="JD" />
  <Avatar initials="AS" />
  <Avatar initials="MK" />
</div>

When the image fails to load, initials are displayed:

(Image fails, shows initials fallback)

<Avatar
  src="/nonexistent.jpg"
  alt="Jane Smith"
  initials="JS"
/>