AvatarGroup

Pile multiple avatars into a single group.

Wrap multiple Avatar within an AvatarGroup to stack them.

{
  "wait": "Loading client-side content..."
}

Size

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

size

{
  "wait": "Loading client-side content..."
}

Max

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

max

{
  "wait": "Loading client-side content..."
}

Examples

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

{
  "wait": "Loading client-side content..."
}

With chip

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

{
  "wait": "Loading client-side content..."
}

With link

Wrap each avatar with a Link to make them clickable.

{
  "wait": "Loading client-side content..."
}

With mask

Wrap an avatar with a CSS mask to display it with a custom shape.

{
  "wait": "Loading client-side content..."
}

The chip prop does not work correctly when using a mask. Chips may be cut depending on the mask shape.

API

Props

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

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    avatarGroup: {
      slots: {
        root: 'inline-flex justify-end',
        base: 'relative rounded-full last:me-0'
      },
      variants: {
        size: {
          '3xs': {
            base: '-me-0.5'
          },
          '2xs': {
            base: '-me-0.5'
          },
          xs: {
            base: '-me-0.5'
          },
          sm: {
            base: '-me-1.5'
          },
          md: {
            base: '-me-1.5'
          },
          lg: {
            base: '-me-1.5'
          },
          xl: {
            base: '-me-2'
          },
          '2xl': {
            base: '-me-2'
          },
          '3xl': {
            base: '-me-2'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        avatarGroup: {
          slots: {
            root: 'inline-flex justify-end',
            base: 'relative rounded-full last:me-0'
          },
          variants: {
            size: {
              '3xs': {
                base: '-me-0.5'
              },
              '2xs': {
                base: '-me-0.5'
              },
              xs: {
                base: '-me-0.5'
              },
              sm: {
                base: '-me-1.5'
              },
              md: {
                base: '-me-1.5'
              },
              lg: {
                base: '-me-1.5'
              },
              xl: {
                base: '-me-2'
              },
              '2xl': {
                base: '-me-2'
              },
              '3xl': {
                base: '-me-2'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Avatar

An img element that includes fallback and supports Nuxt Image.

Badge

A short descriptor for a status or category.