syncfusion Implementing Avatar Control
The Syncfusion Avatar control is a lightweight component used to display user profiles and representations in various formats including images, SVG, font icons, letters, and words. Avatars are essential for user-facing applications, contact lists, notification badges, and profile sections.
When to Use Avatar
Use the Avatar control when you need to:
- Display user profile pictures or initials
- Create circular or rectangular user representations
- Show notification counts with badges
- Build contact lists or user directories
- Implement user avatars in messaging or social applications
- Display profile indicators with custom sizes and colors
- Integrate user representations with other UI components
Control Overview
The Avatar control provides:
- Multiple shapes: Default (rounded rectangle) and circle
- 5 predefined sizes: XLarge, Large, Default, Small, XSmall
- Multiple media formats: Images, SVG, font icons, letters, and words
- Color customization: Default gray or custom CSS classes
- Component integration: Works with Badge and ListView controls
- Responsive design: Scales based on font-size
- ES5 and modern module support: Compatible with various project setups
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installation and dependencies setup
- Webpack and CSS configuration
- Basic avatar implementation with HTML span
- Running the application
- ES5 global script alternatives
- CDN setup options
Avatar Types and Sizes
📄 Read: references/avatar-types-and-sizes.md
- Avatar shape types (Default and Circle)
- Five size classes explained
- Size reference table
- Complete code examples for each type and size
- Visual demonstrations
Customization and Styling
📄 Read: references/customization.md
- Color customization with CSS classes
- Custom sizing using font-size scaling
- Multiple media format support (images, SVG, icons, letters, words)
- CSS class customization examples
- Responsive design considerations
- Custom color palette examples
Avatar with Badge Integration
📄 Read: references/avatar-with-badge.md
- Combining Avatar with Badge control
- Notification badge positioning and styling
- Badge overlap technique
- Examples with all size combinations
- Notification badge with different counts
Avatar in ListView
📄 Read: references/avatar-in-listview.md
- Integrating Avatar with ListView control
- Creating contact list applications
- TypeScript implementation with data binding
- Template binding with conditional rendering
- Avatar positioning and styling in list items
- Complete working example with multiple contacts
Quick Start Example
Basic avatar with default styling:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avatar Quick Start</title>
<link href="url" rel="stylesheet" />
<link href="url" rel="stylesheet" />
</head>
<body>
<!-- Default square avatar with initials -->
<span class="e-avatar">AB</span>
<!-- Circle avatar -->
<span class="e-avatar e-avatar-circle">JD</span>
<!-- Avatar with image -->
<span class="e-avatar e-avatar-circle" style="background-image: url('profile.jpg')"></span>
</body>
</html>
Common Patterns
Pattern 1: Different Sizes
Apply size classes with the base .e-avatar class:
<span class="e-avatar e-avatar-xlarge">AB</span>
<span class="e-avatar e-avatar-large">AB</span>
<span class="e-avatar">AB</span>
<span class="e-avatar e-avatar-small">AB</span>
<span class="e-avatar e-avatar-xsmall">AB</span>
Pattern 2: Color Variations
Create custom color classes for avatars:
<span class="e-avatar e-avatar-circle primary">JD</span>
<span class="e-avatar e-avatar-circle success">MK</span>
<span class="e-avatar e-avatar-circle warning">LP</span>
.e-avatar.primary {
background-color: #0071c1;
color: white;
}
.e-avatar.success {
background-color: #00b251;
color: white;
}
.e-avatar.warning {
background-color: #ffc900;
color: #333;
}
Pattern 3: Mixed Media Types
Display different avatar formats in a row:
<div class="avatar-group">
<!-- Image avatar -->
<span class="e-avatar e-avatar-large" style="background-image: url('user1.jpg')"></span>
<!-- SVG avatar -->
<span class="e-avatar e-avatar-large">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15" fill="currentColor"/>
</svg>
</span>
<!-- Letter avatar -->
<span class="e-avatar e-avatar-large">AB</span>
<!-- Icon avatar -->
<span class="e-avatar e-avatar-large">
<i class="icon-user"></i>
</span>
</div>
Pattern 4: Avatar with Status Badge
Combine avatar with notification indicator:
<div style="position: relative; display: inline-block;">
<span class="e-avatar e-avatar-large e-avatar-circle">JD</span>
<span class="e-badge e-badge-success e-badge-overlap e-badge-circle">●</span>
</div>
Key Properties and Classes
Size Classes
.e-avatar-xlarge- Extra large avatar.e-avatar-large- Large avatar.e-avatar- Default size.e-avatar-small- Small avatar.e-avatar-xsmall- Extra small avatar
Shape Classes
.e-avatar- Default (rounded rectangle).e-avatar-circle- Circular shape
Media Support
- Images: Use
background-imageproperty withbackground-size: cover - SVG: Embed SVG markup or reference SVG files
- Icons: Use icon fonts or icon libraries
- Text: Display initials or short text directly
Common Use Cases
User Profile Display Display user avatar and information in a profile card with the appropriate size and shape.
Contact List Use small or xsmall avatars in ListView for displaying contact lists with initials or profile pictures.
Notification Badge Combine avatar with Badge control to show notification counts or status indicators.
Team Member Grid Display team members in a grid layout with different avatar types and custom colors.
Chat Application Use avatars in message threads to identify senders using small circle avatars with custom colors.
User Selection UI Present users in dropdown or selection lists with consistent avatar styling and sizing.
Next Steps
- Read Getting Started for installation and basic setup
- Explore Types and Sizes for different shape and size options
- Learn Customization for colors and media formats
- Check Badge Integration for notification scenarios
- Review ListView Integration for contact list patterns