🟢 Avatar Group

Basic

NAvatarGroup - used to display a group of NAvatar components.

PropDefaultDescription
max3The maximum number of avatars to display before the rest are hidden.
+1DRAF
<template>
  <NAvatarGroup
    :max="2"
  >
    <NAvatar src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="Anthony Fu" />
    <NAvatar src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="Daniel Roe" />
    <NAvatar src="/images/avatar.png" alt="Phojie Rengel" />
  </NAvatarGroup>
</template>

Size

PropDefaultDescription
sizemdThe size of the avatars in the group.

🚀 You can freely adjust the size of the button using any size imaginable. No limits exist, and you can use breakpoints such as sm:sm, xs:lg to change size based on screen size or states such as hover:lg, focus:3xl to change size based on input state and more.

You can use size prop to set the size of the entire NAvatar or you can set the size of individual avatars using the size prop on the NAvatar component.
+1PRDRAF
<template>
  <NAvatarGroup
    size="xs"
    :max="3"
  >
    <NAvatar src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="Anthony Fu" />
    <NAvatar src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="Daniel Roe" />
    <NAvatar src="/images/avatar.png" alt="Phojie Rengel" />
    <NAvatar label="SR" />
  </NAvatarGroup>
</template>

Customization

Similar to the size prop, any available props of the NAvatar component can be directly passed to the NAvatarGroup component. These props will then be automatically forwarded to the individual NAvatar components within the group.

You can also individually customize each NAvatar. refer to the NAvatar component for more information.

You can also use the una prop to add utility classes. refer to the Props and Presets sections for more information.

+1DRAF
<template>
  <NAvatarGroup
    :max="2"
    avatar="solid-info"
    :una="{
      avatar: 'text-white',
    }"
  >
    <NAvatar label="AF" />
    <NAvatar label="DR" />
    <NAvatar label="PR" />
  </NAvatarGroup>
</template>

Props

import type { NAvatarProps } from './avatar'

/**
 * This extends the `NAvatarProps` interface.
 *
 * @see https://github.com/una-ui/una-ui/blob/main/packages/nuxt/src/runtime/types/avatar.ts
 */
export interface NAvatarGroupProps extends Omit<NAvatarProps, 'una'> {
  /**
   * Set the maximum number of avatars to show.
   *
   * @default 3
   */
  max: number

  /**
   * `Una
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar-group.ts
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
   */
  una?: {
    avatarGroup?: string
    avatarGroupChild?: string
    avatarGroupMargin?: string
    avatarGroupLabel?: string
  } & NAvatarProps['una']
}

Presets

type AvatarGroupPrefix = 'avatar-group'

export const staticAvatarGroup: Record<`${AvatarGroupPrefix}-${string}` | AvatarGroupPrefix, string> = {
  'avatar-group': 'flex flex-row-reverse justify-end',
  'avatar-group-child': 'ring-2 ring-$c-background',
  'avatar-group-margin': '-me-1.5 first:me-0',
  'avatar-group-label': 'text-.9em',
}

export const dynamicAvatarGroup: [RegExp, (params: RegExpExecArray) => string][] = [
]

export const avatarGroup = [
  ...dynamicAvatarGroup,
  staticAvatarGroup,
]

Component

<script setup lang="ts">
import type { NAvatarGroupProps } from '../../types'
import NAvatarGroupDefaultSlot from '../slots/AvatarGroupDefault'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NAvatarGroupProps>(), {
  max: 3,
})
</script>

<template>
  <div
    avatar-group
    v-bind="$attrs"
    :class="una?.avatarGroup"
  >
    <NAvatarGroupDefaultSlot
      :max="max"
      :avatar="props"
    >
      <slot />
    </NAvatarGroupDefaultSlot>
  </div>
</template>
Edit this page on GitHub
Table of Contents