Avatar Stack

Avatar Stack displays multiple Avatars next to each other.

import { AvatarStack } from "@octopusdeploy/design-system-octopus-components"

Properties

User Avatar Stack

Entity Avatar Stack

Avatar Array

Avatars are passed through to Avatar Stack as an array for example:


                                                        
                                                        
                                                            const userAvatars: AvatarStackUserProps[] = [
                                                            { type: "user", text: "Mandy Michael", src: "https://imageurl.com/image.png", title: "Mandy Michael" },
                                                            { type: "user", text: "John Doe",  title: "John Doe" },
                                                            { type: "user", text: "Jane Smith", src: "https://i.pravatar.cc/300", title: "Jane Smith"  },
                                                            { type: "user", text: "Bob Wilson", title: "Bob Wilson" },
                                                        ];
                                                        
                                                            
  • Type: The type of Avatar, e.g. user, template, space, tenant, project - this is important as it determines what style of avatar should be rendered.
  • Text (User Type only): For user type avatars you provide a text property to determine the initials that will render.
  • Title: Renders information about the Avatar on hover, this can be the same as text for user avatars, or something different.