Components

Avatar stack

Displays a group of user avatars in a stacked layout, often used to represent a list of participants, collaborators, or team members.

Avatar

Avatar stack

Component

View code

Show playground

...

Props

Props	Default	Type
`items`	`An example array`	`Avatar[]`
`shape`	`AvatarShape.CIRCLE`	`AvatarShape`
`size`	`AvatarSize.SM`	`AvatarStackSize`
`isInteractive`	—	`boolean`
`itemsLimit`	`null`	`number \| null`
`counterType`	`StackCounterType.ELLIPSIS`	`StackCounterType`

Usage

items

The items prop is an array of Avatar objects that will be displayed in the stack. Each Avatar object should have a displayName property.

 <template>
    <AvatarStack :items="exampleItems" />
</template>
<script setup lang="ts">
const exampleItems = ref<Avatar[]>([
    {
        displayName: "John Doe",
    },
    {
        displayName: "Sarah Penny",
    },
    {
        displayName: "Rachel Kross",
    },
    {
        displayName: "Jadie Miller",
    },
    {
        displayName: "Alicia Mels",
    },
])
</script>

Type: Avatar[]
Default: An example array

TypeScript interface

 interface Avatar {
    displayName: string
    imgUrl?: string
}

shape

The shape prop defines the avatar stack's container shape. It uses the AvatarShape enum.

 <template>
    <AvatarStack :shape="AvatarShape.CIRCLE" />
</template>

Type: AvatarShape
Default: AvatarShape.CIRCLE

Options

Value	Description
`CIRCLE`	Circular shape
`SQUARE`	Square shape

size

The size prop determines the overall dimensions of the avatar stacks items. It accepts values from AvatarStackSize enums.

 <template>
    <AvatarStack :size="AvatarStackSize.MD" />
</template>

Type: AvatarStackSize
Default: AvatarStackSize.MD

Options

Value	Description
`XS`	X-small size
`SM`	Small size
`MD`	Medium size
`LG`	Large size
`XL`	Extra Large size
`XXL`	2X-large size
`XXXL`	3X-large size
`XXXL`	4X-large size

itemsLimit

The itemsLimit prop sets the maximum number of items displayed in the badge stack.

 <template>
    <AvatarStack :itemsLimit="3" />
</template>

Type: number | null
Default: null

counterType

Sets the counter type. It will only appear if the itemsLimit prop is set to a value lower than the amount of items. It uses the StackCounterType enum.

 <template>
    <AvatarStack :itemsLimit="3" :counterType="StackCounterType.COUNTER" />
</template>

Type: StackCounterType
Default: StackCounterType.ELLIPSIS

Options

Value	Description
`COUNTER`	If the total amount of items is higher than: `itemsLimit`it will display a counter with the amount of items that are remaining from the total. In case of having more than 9 items, it will display '+9'.
`ELLIPSIS`	In the event of more items than the limit or the base limit (9 items), it will display an ellipsis (...).