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
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. | string | |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| thumbnail | thumbnail | Specifies the src to an image (remember to add a token if the user is private). | 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 | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |