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).
Initials (for users) or an icon (for entities) will be presented by default.
Users can customize their Avatars. They can upload an image for users and entities, and 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:
- Users: circular
- Entities: square
Style
Three styles are available for use:
- Initials (for users)
-
Icon (for entities)
Note: Icons selected by users are currently rendered as images and are therefore passed through as images in the code implementation. - Image (users and 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 Icon of the Octopus with the cog inside instead of the initials.
- If the text supplied to the user is “admin” or “system”, the fallback will be the Octopus icon instead of the initials.
- If no text is provided or it is blank string a user icon will be displayed.
Size
Three sizes are available for use:
- Large
- Medium
- Small
Color
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.
If a transparent image is uploaded, a subtle default background color is displayed so that the Avatar's shape is still visible.
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.
Note: The border is only shown in the “user” example below to make the circular shape visible. It shouldn't appear in the product.
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:
Related components