AvatarGroup

Pile multiple avatars into a single group.

Nuxt UI

Git

Usage

Wrap multiple Avatar within an AvatarGroup to stack them.

Details

<template>
  <B24AvatarGroup>
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" />
  </B24AvatarGroup>
</template>

Size

Use the size prop to change the size of all the avatars.

Details

<script setup lang="ts">
import type { AvatarGroup } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  size?: AvatarGroup['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

<template>
  <B24AvatarGroup :size="size">
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" />
  </B24AvatarGroup>
</template>

Max

Use the max prop to limit the number of avatars displayed. The rest is displayed as an +X avatar.

Details

<script setup lang="ts">
export interface ExampleProps {
  max?: number
}

withDefaults(defineProps<ExampleProps>(), {
  max: 2
})
</script>

<template>
  <B24AvatarGroup :max="max">
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" />
  </B24AvatarGroup>
</template>

Examples

With tooltip

Wrap each avatar with a Tooltip to display a tooltip on hover.

Details

<template>
  <B24AvatarGroup>
    <B24Tooltip text="Employee Name">
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    </B24Tooltip>
    <B24Tooltip text="Assistant Name">
      <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
    </B24Tooltip>
    <B24Tooltip text="Rotated Employee Name">
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" />
    </B24Tooltip>
  </B24AvatarGroup>
</template>

With chip

Wrap each avatar with a Chip to display a chip around the avatar.

Details

<template>
  <B24AvatarGroup>
    <B24Chip inset color="success" position="top-left" size="xs">
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" size="md" />
    </B24Chip>
    <B24Chip inset color="ai" position="top-left" size="xs">
      <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" size="md" />
    </B24Chip>
    <B24Chip inset color="danger" position="top-left" size="xs">
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" size="md" />
    </B24Chip>
  </B24AvatarGroup>
</template>

With link

Wrap each avatar with a Link to make them clickable.

Details

<template>
  <B24AvatarGroup>
    <B24Link
      raw
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-blue-500 transition"
    >
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    </B24Link>
    <B24Link
      raw
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-ai-500 transition"
    >
      <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
    </B24Link>
    <B24Link
      raw
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-collab-500 transition"
    >
      <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" class="rotate-y-180" />
    </B24Link>
  </B24AvatarGroup>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
size		"lg" | "md" | "3xs" | "2xs" | "xs" | "sm" | "xl" | "2xl" | "3xl"
max		string | number The maximum number of avatars to display.
b24ui		Partial<{ root: string; base: string; }>

Slots

Slot	Type
default	{}