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"
>
</dda-avatar>Properties
aria_label
ARIA label for accessibility and screen readers.
string
button_id
Unique ID assigned to the dropdown button.
string
component_mode
Defines a special mode (dark, light).
string
custom_class
Adds custom CSS classes for extra styling.
string
design
Determines the avatar design (default, status, verified, story, notification).
"default" | "notification" | "status" | "story" | "verified"
icon
CSS class for the icon in icon type avatars.
string
notification_number
Number displayed in the notification badge.
number
options
JSON string containing dropdown options.
string
rounded
Specifies the avatar shape as square or circle.
"circle" | "square"
selected
Stores the currently selected dropdown option.
string
size
Sets the avatar size (xs, sm, md, lg, xl, xxl).
"lg" | "md" | "sm" | "xl" | "xs" | "xxl"
src
Image URL for photo type avatars.
string
text
Text displayed for text type avatars.
string
type
Defines the avatar type (photo, icon, or text).
"icon" | "photo" | "text"
button_name
Name attribute for the buttons in avatar dropdown
string
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