AvatarGroup

Overlapping stack with a +N overflow. Use stable person IDs; joining and leaving faces pop while the rest of the stack shuffles over.

Preview

Open in the playground

Usage

AvatarGroupExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzAvatarGroup } from '@chrisdalbano/forza-ui'
const party = ref([
  { id: 1, name: 'Ana Reyes' },
  { id: 2, name: 'Ben Ito' },
])
</script>

<template>
  <FzAvatarGroup :people="party" label="Party" :max="4" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
people	readonly ForzaPerson[]	Yes	None
label	string	Yes	None
max	number | undefined	No	4
size	"md" | "sm" | "lg" | undefined	No	"md"

Events and state

parent owns the people array

Slots

none

Add from source

forza add avatargroup

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.