v3.0.0-alpha.5
Components

AvatarGroup

GitHub
Stack multiple avatars in a group.

Usage

Wrap multiple Avatar within an AvatarGroup to stack them.

NRRHBC
<template>
  <UAvatarGroup>
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
  </UAvatarGroup>
</template>

Size

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

NRRHBC
<template>
  <UAvatarGroup size="xl">
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
  </UAvatarGroup>
</template>

Max

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

+1RHBC
<template>
  <UAvatarGroup :max="2">
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
  </UAvatarGroup>
</template>

Examples

With tooltip

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

NRRHBC
<template>
  <UAvatarGroup>
    <UTooltip text="benjamincanac">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/739984?v=4"
        alt="Benjamin Canac"
      />
    </UTooltip>

    <UTooltip text="romhml">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/25613751?v=4"
        alt="Romain Hamel"
      />
    </UTooltip>

    <UTooltip text="noook">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/19751938?v=4"
        alt="Neil Richter"
      />
    </UTooltip>
  </UAvatarGroup>
</template>

With chip

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

NR
RH
BC
<template>
  <UAvatarGroup>
    <UChip inset color="green">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/739984?v=4"
        alt="Benjamin Canac"
      />
    </UChip>

    <UChip inset color="amber">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/25613751?v=4"
        alt="Romain Hamel"
      />
    </UChip>

    <UChip inset color="red">
      <UAvatar
        src="https://avatars.githubusercontent.com/u/19751938?v=4"
        alt="Neil Richter"
      />
    </UChip>
  </UAvatarGroup>
</template>

With link

Wrap each avatar with a Link to make them clickable.

<template>
  <UAvatarGroup>
    <ULink
      to="https://github.com/benjamincanac"
      target="_blank"
      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
      raw
    >
      <UAvatar
        src="https://avatars.githubusercontent.com/u/739984?v=4"
        alt="Benjamin Canac"
      />
    </ULink>

    <ULink
      to="https://github.com/romhml"
      target="_blank"
      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
      raw
    >
      <UAvatar
        src="https://avatars.githubusercontent.com/u/25613751?v=4"
        alt="Romain Hamel"
      />
    </ULink>

    <ULink
      to="https://github.com/noook"
      target="_blank"
      class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
      raw
    >
      <UAvatar
        src="https://avatars.githubusercontent.com/u/19751938?v=4"
        alt="Neil Richter"
      />
    </ULink>
  </UAvatarGroup>
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

size

md

"2xl" | "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "3xl"

max

string | number

The maximum number of avatars to display.

ui

Partial<{ root: string; base: string; }>

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    avatarGroup: {
      slots: {
        root: 'inline-flex flex-row-reverse justify-end',
        base: 'relative rounded-full ring-white dark:ring-gray-900 first:me-0'
      },
      variants: {
        size: {
          '3xs': {
            base: 'ring-1 -me-0.5'
          },
          '2xs': {
            base: 'ring-1 -me-0.5'
          },
          xs: {
            base: 'ring-1 -me-0.5'
          },
          sm: {
            base: 'ring-2 -me-1.5'
          },
          md: {
            base: 'ring-2 -me-1.5'
          },
          lg: {
            base: 'ring-2 -me-1.5'
          },
          xl: {
            base: 'ring-2.5 -me-2'
          },
          '2xl': {
            base: 'ring-2.5 -me-2'
          },
          '3xl': {
            base: 'ring-2.5 -me-2'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

Avatar

An image element with fallback.

Badge

A short text to represent a status or a category.