Avatar

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.

Usage

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

Sample

2 samples
1
<calcite-avatar full-name="Urbano Monti"></calcite-avatar>
v3.0.3

API reference

Properties

PropertyAttributeDescriptionTypeDefault
fullNamefull-nameSpecifies the full name of the user. When label and thumbnail are not defined, specifies the accessible name for the component.string
labellabelSpecifies alternative text when thumbnail is defined, otherwise specifies an accessible label.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
thumbnailthumbnailSpecifies the src to an image (remember to add a token if the user is private).string
userIduser-idSpecifies the unique id of the user.string
usernameusernameSpecifies the username of the user.string

Styles

NameDescription
--calcite-avatar-corner-radiusSpecifies the component's corner radius.
--calcite-avatar-colorSpecifies the component's icon or initial color.
--calcite-avatar-background-colorSpecifies the component's background color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close