Avatar

Avatars are used to represent a user or an entity in the UI. They can be used in various contexts, such as user profiles, comments, or lists.

import {AvatarModule} from "@qualcomm-ui/angular/avatar"

Usage

Avatars can display a user or entity image, initials, or custom content when an image is unavailable. They can also indicate the status of the user or entity.

Overview

The anatomy of the avatar component is as follows:

q-avatar-root: The main component.
q-avatar-image: (optional) Displays an image as the avatar.
q-avatar-content: (optional) Displays alternative content, such as initials or an icon, and acts as a fallback if the image fails to load.
q-avatar-status: (optional) Shows a status indicator dot.

Examples

Showcase

Here's a typical usage example:

Brand

<div q-avatar>
  <img alt="John Doe" q-avatar-image src="/images/avatar-man.png" />
  <div q-avatar-content>JD</div>
  <div q-avatar-status status="active"></div>
</div>

The q-avatar-content directive displays alternative content within the avatar. Use it by itself to show initials or an icon, or together with q-avatar-image to provide fallback content if the image cannot be loaded.

Brand

Initials

Icon

Fallback

Initials
<div q-avatar>
  <div q-avatar-content>OK</div>
</div>
Icon
<div q-avatar>
  <div q-avatar-content>
    <svg aria-label="User" qIcon="User"></svg>
  </div>
</div>
Fallback
<div q-avatar>
  <img alt="John Doe" q-avatar-image src="https://example.invalid" />
  <div q-avatar-content>JD</div>
</div>

Sizes

Use the size input to set the size of the avatar. The available sizes are xs, sm, md (default), lg, and xl.

Brand

XSmall

Small

Medium

Large

XLarge

XSmall
<div q-avatar size="xs">
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
</div>
Small
<div q-avatar size="sm">
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
</div>
Medium
<div q-avatar size="md">
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
</div>
Large
<div q-avatar size="lg">
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
</div>
XLarge
<div q-avatar size="xl">
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
</div>

Variants

When displaying initials or an icon, use the variant input on q-avatar-content to set the avatar's style. Available variants are neutral (default), contrast, and brand.

Brand

Neutral

High Contrast

Brand

Neutral
<div q-avatar>
  <div q-avatar-content variant="neutral">OK</div>
</div>
High Contrast
<div q-avatar>
  <div q-avatar-content variant="contrast">OK</div>
</div>
Brand
<div q-avatar>
  <div q-avatar-content variant="brand">OK</div>
</div>

Status

To indicate the status of the user or entity, use the q-avatar-status directive and set its status input to one of: active, offline (default), away, or busy.

Brand

Active

Offline

Away

Busy

Active
<div q-avatar>
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
  <div q-avatar-status status="active"></div>
</div>
Offline
<div q-avatar>
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
  <div q-avatar-status status="offline"></div>
</div>
Away
<div q-avatar>
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
  <div q-avatar-status status="away"></div>
</div>
Busy
<div q-avatar>
  <img alt="Jane Doe" q-avatar-image src="/images/avatar-woman.png" />
  <div q-avatar-content>JD</div>
  <div q-avatar-status status="busy"></div>
</div>

State Callback

You can listen for changes to the avatar's state by using the stateChanged output.

Brand

current state: loaded

current state: error

<div q-avatar (stateChanged)="currentStateValid.set($event.state)">
  <img alt="John Doe" q-avatar-image src="/images/avatar-man.png" />
  <div q-avatar-content>JD</div>
</div>
<output>current state: {{ currentStateValid() }}</output>
<div q-avatar (stateChanged)="currentStateInvalid.set($event.state)">
  <img alt="John Doe" q-avatar-image src="https://example.invalid" />
  <div q-avatar-content>JD</div>
</div>
<output>current state: {{ currentStateInvalid() }}</output>

API

q-avatar

Prop	Type
dir The document's text/writing direction.	'ltr' \| 'rtl'
id HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
size Governs the width and height of the avatar as well as the font size of its content.	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'
status Optional status for the avatar, renders a dot indicator next to the avatar.	\| 'offline' \| 'active' \| 'away' \| 'busy'
variant The style variant of the avatar.	\| 'neutral' \| 'contrast' \| 'brand'
(stateChanged) Function called when the avatar state is changed.	{ state: string }

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

Type

string

Description

HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)

size

Type

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'

Description

Governs the width and height of the avatar as well as the font size of its content.

status

Type

| 'offline'
| 'active'
| 'away'
| 'busy'

Description

Optional status for the avatar, renders a dot indicator next to the avatar.

variant

Type

| 'neutral'
| 'contrast'
| 'brand'

Description

The style variant of the avatar.

(stateChanged)

Type

{
  state: string
}

Description

Function called when the avatar state is changed.

q-avatar-image

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

q-avatar-content

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

q-avatar-status

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

Text Input

Data Grid / Table