API Reference
Complete API documentation for components, utilities, and framework core
Avatar
User avatar with images, initials, or icons with optional status indicators
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| name | string | '' | User name (generates initials if no children) |
| initials | string | undefined | Custom initials (overrides auto-generation) |
| status | string | undefined | Status indicator ('online', 'away', 'busy', 'offline') |
| class | string | - | Avatar styling (includes avtrsize-* utilities) |
🎨 Utility Classes
| Pattern | Description |
|---|---|
| avtrsize-{size} | 3xs through 8xl sizing (15 sizes total) |
| {variant} | solid, subtle, accent, gradient |
💻 Examples
Avatar with Initials
javascript•Avatar with Initials
return Avatar({ name: 'John Doe' }); // Shows "JD"▶️ Live Preview
JD
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
Avatar with Image
javascript•Avatar with Image
return Avatar(
{ name: 'Jane Smith', status: 'online', class: 'vwfsize-lg' },
img({ src: 'https://i.pravatar.cc/150?img=31', class: 'w-full h-full object-cover' })
);▶️ Live Preview
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
🔗 Related
Explore vwf
Discover what vwf can do