← Back to Components

QdsUserAvatar

A user avatar component that displays either an image or initials.

Overview

The qds-user-avatar component is a custom element that displays a user’s avatar, either as an image or as their initials if no image is available. It also supports displaying a status indicator.

Usage

To use the qds-user-avatar component, include it in your HTML:

<qds-user-avatar name="John Doe" image="url-to-image" status="online"></qds-user-avatar>

API Reference

Attributes

• name - The user’s name (used for initials if no image is provided) (string).
• image - URL to the user’s avatar image (string).
• status - User status (online, away, busy, offline) (string).

CSS Parts

• avatar - The avatar container.
• image - The avatar image.
• initials - The initials text.
• status - The status indicator.

Events

• click - When the avatar is clicked.

Example

<qds-user-avatar name="John Doe" image="url-to-image" status="online"></qds-user-avatar>
<script>
  const avatar = document.querySelector('qds-user-avatar');
  avatar.addEventListener('click', () => {
    console.log('Avatar clicked');
  });
</script>