# Avatar

## Overview

<figure><img src="/files/6iA2dNiR0RQoGbeAZlpR" alt=""><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Vanilla Js" %}

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

{% endtab %}

{% tab title="React" %}

```jsx
<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"
    dropdown_enabled="true"
>
</DdaAvatar>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<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"
    dropdown_enabled="true"
>
</DdaAvatar>
```

{% endtab %}

{% tab title="Angular" %}

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

{% endtab %}
{% endtabs %}

### Properties

| Property                     | Description                                                                              | Type                                                               |
| ---------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `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`                                                           |
| <kbd>dropdown\_enabled</kbd> | boolean for disable / enable for the options dropdown.                                   | `boolean`                                                          |

## Anatomy

<figure><img src="/files/o71uERFq0FuV7Xrg3NbE" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/avatar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.