Avatar
User avatar display, supporting image and text fallback.
Basic Usage
Load images via src. Falls back to text initials (from alt) on load failure.
tsx
import { Avatar } from '@airo-ui/react'
function Demo() {
return (
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
<Avatar alt="User One" />
<Avatar alt="John Doe" />
<Avatar alt="Jane Smith" />
</div>
)
}Size
Support sm, md, lg sizes.
tsx
<Avatar alt="A" size="sm" />
<Avatar alt="A" size="md" />
<Avatar alt="A" size="lg" />Shape
Support circle (default) and square shapes.
tsx
<Avatar alt="Circle" shape="circle" />
<Avatar alt="Square" shape="square" />Custom Fallback
tsx
<Avatar alt="User">
<span>U</span>
</Avatar>API
Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | -- | Image URL |
alt | string | -- | Alt text, also used for initials |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
shape | 'circle' | 'square' | 'circle' | Shape |
children | React.ReactNode | -- | Custom fallback content |