An Avatar is a small visual representation of a user or entity. It can be displayed independently or, more commonly, combined with supporting text to provide more context.
A user is a person who owns an account with Octopus Deploy. An entity has a distinct, independent definition, such as a Space, Project, Tenant, or Template.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
|---|---|
|
1. Initials |
Initials will be displayed by default for users. |
|
2. Icon |
An icon will be displayed by default for entities. |
|
3. Image |
Users can customize their Avatars. For users and entities, they can upload an image. For entities only, they can select from a pre-defined set of icons and background colors which are rendered as images. |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| size Variant | large | medium | small | large |
| type Variant | tenant | space | project | user | template | space |
| color Variant | white | blue | navy | green | purple | yellow | orange | red | grey | blue |
| state Variant | rest | hover | focus | rest |
| hasImage Boolean | true | false | false |
| isMuted Variant | false | true | false |
| isServiceUser Variant | false | true | false |
| hasEditOverlay Variant | false | true | false |
| isSysAdminUser Variant | false | true | false |
Type
There are four types of Avatars:
- User
- Space
- Project
- Tenant
- Template
(Note: The border is only shown in the “Tenant” example below to make the square shape visible. It shouldn't appear in the product.)
Shape
The Avatar’s shape is pre-defined based on its type:
|
Avatar type |
Shape |
|---|---|
|
1. User |
Circular |
|
2. Entity |
Square |
Style
Three styles are available for use:
|
Option |
Description |
|---|---|
|
1. Initials |
For users only |
|
2. Icon |
For entities only Note: Icons selected by users are currently rendered as images and are therefore passed through as images in the code implementation. |
|
3. Image |
For users or entities |
User styles
A user avatar has some additional requirements defined:
- The fallback will be initials. This will take the first character from the first 2 words. If only one word is provided, it will use the first two characters of that word.
- If the user is a Service User, the fallback will be an Octopus icon with the cog instead of initials.
- If the text supplied to the user is “admin” or “system”, the fallback will be the Octopus icon instead of initials.
- If no text is provided or it is blank string a user icon will be displayed.
|
User style |
Description |
|---|---|
|
1. Human |
Avatar may display a custom image, otherwise the fallback is initials. If no text or a blank string is provided, a user icon will be displayed. |
|
2. Service |
Avatar will display an Octopus icon with the cog. |
|
3. Admin/System |
If supplied text is “admin” or “system”, Avatar will display an Octopus icon. |
Size
Three sizes are available for use:
- Large
- Medium
- Small
Color
Default colors
Text and icons are always white by default.
A user, Project, or Space Avatar has a default background color. This can be customized from a pre-defined set to ensure the Avatar meets Level AA color contrast requirements.
Color isn’t passed as a property in code because it’s generated as part of the icon when you select the icon and its color.
|
Avatar type |
Default color |
|---|---|
|
1. User |
Blue |
|
2. Space |
Blue |
|
3. Project |
Navy |
Transparent image
If a transparent image is uploaded, a subtle default background color is displayed so that the Avatar's shape is still visible.
- User
- Entity
Customization
Users can customize their Avatar’s background color from the following options:
- Blue
- Navy
- Green
- Purple
- Yellow
- Orange
- Red
- Grey
All variants
Behavior
An Edit overlay appears when an Avatar is hovered over at the page level (such as a Project Details Page). This opens the Settings page, where you can customize the Avatar.
The overlay is only visible when a href attribute is provided and the isEditable property is set to true.
Component dependencies
This component is internally dependent on the following components: