Avatar
Avatar component represents a user's identity visually through images, icons, or text.
Overview
Avatar is a UI component that visually represents a user's identity. It supports profile images, system icons, and initials, with an optional activity ring to indicate user status.
Basic Examples
AB
basic.tsx
import { Avatar } from 'podo-ui';
// Image avatar
<Avatar type="image" src="/profile.jpg" size={56} />
// Icon avatar (default)
<Avatar type="icon" icon="icon-user" size={56} />
// Text avatar
<Avatar type="text" text="AB" size={56} />
// With activity ring
<Avatar type="image" src="/profile.jpg" size={56} activityRing />Types
Avatar supports three types: image, icon, and text.
Image Type
Icon Type
Text Type
AB
CD
EF
김철
보라
types.tsx
// Image type - displays user photo
<Avatar type="image" src="/profile.jpg" size={56} />
// Icon type - displays system icon with gray background
<Avatar type="icon" icon="icon-user" size={56} />
// Text type - displays initials with gray background
<Avatar type="text" text="AB" size={56} />Sizes
Avatar comes in 9 different sizes from 16px to 56px.
All Available Sizes
16
20
24
28
32
36
40
48
56
sizes.tsx
// Available sizes: 16, 20, 24, 28, 32, 36, 40, 48, 56
<Avatar type="image" src="/profile.jpg" size={16} />
<Avatar type="image" src="/profile.jpg" size={32} />
<Avatar type="image" src="/profile.jpg" size={56} />Activity Ring
Activity ring indicates whether a user is currently active. When inactive, it displays in default state.
Default State
Active State
activity-ring.tsx
// Default state - no ring
<Avatar type="image" src="/profile.jpg" size={56} />
// Active state - blue ring
<Avatar type="image" src="/profile.jpg" size={56} activityRing />
// Works with all types
<Avatar type="icon" icon="icon-user" size={56} activityRing />
<Avatar type="text" text="AB" size={56} activityRing />Combinations
Various combinations of type, size, and activity ring.
Example Combinations
김
AB
combinations.tsx
// Small avatars for list items
<Avatar type="image" src="/user1.jpg" size={32} />
<Avatar type="icon" icon="icon-user" size={32} />
<Avatar type="text" text="김" size={32} />
// Medium avatars with activity ring
<Avatar type="image" src="/user2.jpg" size={48} activityRing />
<Avatar type="icon" icon="icon-user" size={48} activityRing />
<Avatar type="text" text="AB" size={48} activityRing />Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'image' | 'icon' | 'text' | 'icon' | Avatar type (image, icon, or text) |
src | string | - | Image source URL (for type='image') |
icon | string | 'icon-user' | Icon class name (for type='icon') |
text | string | - | Text content, displays first 2 characters (for type='text') |
size | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 56 | Avatar size in pixels |
activityRing | boolean | false | Show activity ring to indicate active status |
alt | string | 'Avatar' | Alternative text for image accessibility |
onClick | () => void | - | Click event handler |
className | string | '' | Additional CSS classes |