Avatar

The Avatar component allows users to express themselves visually by choosing an image or icon that represents them within your application.

Setting Up Your Avatar

1: Choose the Avatar's Visual Representation

Select the visual that will represent your avatar:

• Icon: Choose a predefined icon from the library to represent the avatar. This is a good option for a simple, symbolic representation.

• Image: Upload your image to personalize the avatar. This is ideal for using photos or custom graphics.

2: Define the Shape (Variant)

Choose the shape of your avatar:

• Circle: Displays the avatar within a circular frame. This is a common choice for user profiles.

• Square: Displays the avatar within a square frame

3: Set the Size

• Predefined Sizes: Select from preset sizes like "Small," "Medium," or "Large."

• Custom Size: Specify the exact dimensions (in pixels) for your avatar if you need more precise control

Adjust the size of the avatar to fit your design.

Adding Context and Detail

4. Provide Additional Information (Details)

Use the "Details" settings to add text that provides more context about the avatar:

• Primary Text: Add a main label, such as the user's name.

• Secondary Text: Include supplementary information, such as a job title or description.

• Text Position: Control the placement of the text relative to the avatar (top, bottom, left, or right).

• Tags: Add tags to categorize or further describe the avatar.

5. Indicate Status or Presence (Optional)

Use "Status" and "Presence" indicators to visually communicate the state or availability of the person or object represented by the avatar. These are small visual cues that provide information at a glance.

• Status: A colored dot overlaid on the avatar, used to represent different states.

  • Examples:

    • Approval Status: Green for approved, yellow for pending, red for declined.

    • Account Status: Green for active, red for locked, gray for suspended.

    • Task Status: Green for completed, yellow for in progress, gray for not started.

  • Customization: You can control the dot's position on the avatar and choose the colors representing each status.

• Presence: Similar to "Status," but indicates explicitly online/offline availability.

  • Common Use: Often used in communication or collaboration tools.

  • Standard Colors: Typically uses green for online/available and red or gray for offline/unavailable.

Why Use Status and Presence?

• Enhanced Communication: Quickly convey information without needing extra text.

• Improved User Experience: Help users understand availability and make informed decisions.

• Increased Efficiency: Reduce cognitive load with easily interpreted visual cues.

Example: In a customer support app, use avatars with presence indicators to show which support agents are currently online and available to help.

6. Add an Entity Icon (Optional)

Use an "Entity Icon" to clarify what the avatar represents (e.g., a single user, a group, or an organization).

• How to Add: Select an icon from the library that symbolizes the entity type.

• Example: Use a single-person icon for an individual, a group icon for a team, or a building icon for a company.

• Customization:

  • Size: Adjust the icon's size to be visible but not obstruct the main avatar image.

  • Position: Place the icon in a corner of the avatar (e.g., top-left, bottom-right).

7. Add Interactive Actions (Optional)

Turn your avatars into interactive elements by adding action buttons.

• Action Buttons: Add buttons that trigger specific actions when clicked.

  • Examples: "Edit" (to update a profile), "Message" (to start a chat), "Follow" (to connect with a user).

• Triggers: Define how the action buttons are activated:

  • On Click: The action is performed when the user clicks the button.

  • On Hover: The action is performed or previewed when the user hovers their mouse over the button

---

Example Use Cases

• User Profiles: Display user avatars with their names and roles.

• Contact Lists: Show contact avatars with their status or presence.

• Team Dashboards: Represent team members with avatars and their current projects.

• Interactive Lists: Use avatars with action buttons to enable quick interactions (e.g., sending a message to a user).

---

Important Notes

• Image Optimization: For best performance, use optimized images with appropriate dimensions.

• Accessibility: Provide alternative text for avatars to ensure accessibility for users with visual impairments.

• Consistency: Maintain a consistent style and size for avatars across your application for a cohesive user experience