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, or Tenant.
Anatomy
Anatomy summary lists and describes all the elements that exist within a component (including other components nested within).
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.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| scale Variant | 24 | 32 | 36 | 40 | 48 | 56 | 56 |
| shape Variant | circular | squared | circular |
| style Variant | default | icon | image | text | default |
Type
There are four types of Avatars:
- User
- Space
- Project
- Tenant
(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)
- Image (users and entities)
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.
Note: The border is only shown in the “user” example below to make the circular shape visible. It shouldn't appear in the product.
AvatarStack
Use the AvatarStack to display multiple users or entities next to each other. This can be especially useful in lists and tables, where many users or entities may be associated with an item.
The whole component is interactive, so when clicked, the user is directed to a new page with the complete list of users or entities.
Behaviour
On hover of an Avatar inside the AvatarStack, the name of the user/entity displays using the HTML title attribute.
An Edit link 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.
Component dependencies
This component is internally dependent on the following components: