Avatar | Calcite Design System

Avatars are visual representations of users' accounts that can be presented by an image or initials.

Overview

Avatars can be used inside of other components or by themselves to represent the user.

Avatars can display an image or simply the initials of the profile. A randomly generated AA accessible background will fill behind the initials. That generated fill will stay assigned to the user until their account is deleted or an image is used.

Sample

Usage

Quick representation of the user or groups of users
Within Chips for filtering
User profiles

API reference

Properties

Property	Attribute	Description	Type	Default
fullName	full-name	Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.	`string`
label	label	Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.	`string`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
thumbnail	thumbnail	Specifies the `src` to an image. If the image is private, include an access token in the URL.	`string`
userId	user-id	Specifies the unique id of the user.	`string`
username	username	Specifies the username of the user.	`string`

Styles

Name	Description
--calcite-avatar-corner-radius	Specifies the component's corner radius.
--calcite-avatar-color	Specifies the component's icon or initial color.
--calcite-avatar-background-color	Specifies the component's background color.

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`