Menu
Documentation
v4.0.0-beta.4

Avatar Group

<BaseAvatarGroup /> · A group of users or of entities.

View SourceOpen Issue
?
?
?
+2
vue
<template>
  <BaseAvatarGroup :avatars="people" />
</template>

<script setup lang="ts">
const people = [
  {
    src: '/img/avatars/19.svg',
  },
  {
    src: '/img/avatars/16.svg',
  },
  {
    src: '/img/avatars/3.svg',
  },
  {
    src: '/img/avatars/22.svg',
  },
  {
    src: '/img/avatars/2.svg',
  },
]
</script>

Features

  • Control over image render
  • inherits props from avatar
  • Built-in badges and masks

Anatomy

This component is uncontrolled and accepts an array of avatars as a prop. It also has built-in badges and masks, as well as useful utilities to control size and border radius.

vue
<template>
  <BaseAvatarGroup />
</template>

API Reference

This component has props that you can use to modify its behavior.

Prop Type
avatars
default:-
BaseAvatarProps[]

The avatars to display.

limit
default:4
number

The maximum number of avatars to display.

size
default:"sm"
"sm" | "xxs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"

The size of the avatars.

rounded
default:"full"
"sm" | "full" | "md" | "lg" | "none"

The radius of the image.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any

Examples

Size

Use the size prop to control the size of the avatars inside the group.

?
?
?
+2
vue
<template>
  <BaseAvatarGroup size="md" :avatars="people" />
</template>

<script setup lang="ts">
const people = [
  {
    src: '/img/avatars/19.svg',
  },
  {
    src: '/img/avatars/16.svg',
  },
  {
    src: '/img/avatars/3.svg',
  },
  {
    src: '/img/avatars/22.svg',
  },
  {
    src: '/img/avatars/2.svg',
  },
]
</script>

Limit

Use the limit prop to control how many avatars are shown before a counter is displayed.

?
?
?
?
?
?
?
?
vue
<template>
  <BaseAvatarGroup :avatars="people" :limit="8" />
</template>

<script setup lang="ts">
const people = [
  {
    src: '/img/avatars/19.svg',
  },
  {
    src: '/img/avatars/16.svg',
  },
  {
    src: '/img/avatars/3.svg',
  },
  {
    src: '/img/avatars/22.svg',
  },
  {
    src: '/img/avatars/2.svg',
  },
]
</script>

Avatar

Breadcrumb