Avatar
Avatar visually represents a user through a profile image or initials, helping to identify individuals within the interface.
Overview
Usage
When to Use This Component
Avatars are used in user interfaces to visually represent individuals, groups, or objects. They are ideal for user profiles, messaging apps, social media, dashboards, and any interface requiring visual identification of users or entities.
How It Works
An avatar component displays a graphical representation, such as a photo, icon, or text (e.g., initials), within a shape (typically a circle or rounded square). Avatars can also include status indicators to show user status (e.g., online, verified). The component is configurable to display various sizes and styles based on the application’s needs.
Code
<dda-avatar
type="photo"
size="md"
design="default"
rounded="circle"
src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
icon="material-icons"
text="AB"
options='["Option 1","Option 2","Option 3"]'
notification_number="20"
custom_class=""
component_mode=""
aria_label="avatar"
button_id="button"
button_name="button"
dropdown_enabled="true"
>
</dda-avatar>Properties
type
Defines the avatar type (photo, icon, or text).
"icon" | "photo" | "text"
size
Sets the avatar size (xs, sm, md, lg, xl, xxl).
"lg" | "md" | "sm" | "xl" | "xs" | "xxl"
design
Determines the avatar design (default, status, verified, story, notification).
"default" | "notification" | "status" | "story" | "verified"
rounded
Specifies the avatar shape as square or circle.
"circle" | "square"
src
Image URL for photo type avatars.
string
icon
CSS class for the icon in icon type avatars.
string
text
Text displayed for text type avatars.
string
options
JSON string containing dropdown options.
string
notification_number
Number displayed in the notification badge.
number
custom_class
Adds custom CSS classes for extra styling.
string
component_mode
Defines a special mode (dark, light).
string
aria_label
ARIA label for accessibility and screen readers.
string
button_id
Unique ID assigned to the dropdown button.
string
button_name
Name attribute for the buttons in avatar dropdown
string
dropdown_enabled
boolean for disable / enable for the options dropdown.
boolean
Anatomy
Anatomy Options
Image: Displays the user’s profile picture, icon or text, providing visual identification. It helps users quickly recognize the individual represented.
Badge: Positioned in the top right corner of the avatar, the badge displays a notification count or status, such as "20+." This provides users with information at a glance, such as unread messages or notifications related to the user.
Status Icon: Positioned at the bottom of the avatar, the status icon indicates the user’s current status (e.g., online, offline, busy). It is often color-coded, enhancing visibility and making it easy to understand the user’s availability.
Dos and Don'ts
Use avatars to visually represent users or objects.
Don't use avatars for text-heavy content.
Ensure avatars are large enough to be easily recognizable.
Don't make avatars too small to identify.
Label avatars clearly if additional context is needed.
Avoid using ambiguous or unclear avatars without context.
Provide status indicators to show user status when relevant.
Don't overload avatars with too many status indicators.
Use consistent styling and spacing across all avatars in the application.
Don't use inconsistent styles that may confuse users.
Update avatar images in real-time if they change.
Don't use outdated or incorrect images.
Last updated