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

Vanilla Js

<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>

React

<DdaAvatar
    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">
</DdaAvatar>

Vue

<DdaAvatar
    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">
</DdaAvatar>

Angular

<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

Property	Description	Type
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

Dos	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.