Use the Avatar Stack to display multiple Avatars next to each other of a single type (users or entities). This can be especially useful in lists and tables, where many users or entities may be associated with an item.
Examples:
- Teams (to display users in each team)
- Tenants (to display projects associated with each tenant)
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 |
Optional? |
|---|---|---|
|
1. First Avatar |
First Avatar in stack. Sits on top of other Avatars. |
No |
|
2. Second and third Avatars |
Other Avatars in stack. Second Avatar sits behind first Avatar, and third Avatar sits behind second Avatar. |
Yes |
|
3. Additional count |
Displays the number of additional Avatars in stack, styled as a Link. For example, if there are 10 Avatars in the stack, the first three Avatars are displayed, with “+7” on the end. |
Yes (will appear if extra avatars exist) |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | user | entity | entity |
| state Variant | rest | hover | focused | rest |
| itemCount Variant | 1 | 2 | 3 | 3 + | 1 |
Type
There are two types of Avatar Stack (using Avatar as a base):
- User
- Entity (such as a Space, Project, Tenant, or Template)
State
On hover and focus, the component is highlighted and adopts the link’s hover state of underlined. The link is not treated as a separate interaction because the whole component is interactive.
Behavior
Optionally you can make the whole component interactive, so when clicked, the user is directed to a new page with the complete list of users or entities.
On hover of an Avatar inside the Avatar Stack, the name of the user/entity displays using the HTML title attribute.
Component dependencies
This component is internally dependent on the following components:
Avatar
Avatar is a visual representation of a user (person) or entity (such as Spaces, Projects, or Tenants)
Icons
Our icon library with guidelines on using and adding icons
Help and support