Avatar

Display an image that represents a resource or a group of resources.

Usage

Display an image that represents a resource or a group of resources.

<template>
  <UAvatar
    src="https://avatars.githubusercontent.com/u/739984?v=4"
    alt="Avatar"
  />
</template>

Size

Use the size prop to change the size of the Avatar.

<template>
  <UAvatar
    size="sm"
    src="https://avatars.githubusercontent.com/u/739984?v=4"
    alt="Avatar"
  />
</template>

Chip

Use the chip-color, chip-text and chip-position props to display a chip on the Avatar.

<template>
  <UAvatar
    chip-color="primary"
    chip-text=""
    chip-position="top-right"
    size="sm"
    src="https://avatars.githubusercontent.com/u/739984?v=4"
    alt="Avatar"
  />
</template>

Placeholder

If there is an error loading the src of the avatar or src is null / false a background placeholder will be displayed, customizable in ui.avatar.background.

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.avatar.default.icon to display an icon on top of the background.

<template>
  <UAvatar 
    icon="i-heroicons-photo" 
    size="sm" 
  />
</template>

Alt

Otherwise, a placeholder will be displayed with the initials of the alt prop, customizable in ui.avatar.placeholder.

<template>
  <UAvatar 
    alt="Benjamin Canac" 
    size="sm" 
  />
</template>

Group

To stack avatars as a group, use the AvatarGroup component.

• To limit the amount of avatars to show, use the max prop. It’ll truncate the avatars and show a “+X” label (where X is the remaining avatars)
• To size all the avatars equally, pass the size prop
• To adjust the spacing or the ring between avatars, customize with ui.avatarGroup.margin or ui.avatarGroup.ring

<template>
  <UAvatarGroup size="sm" :max="2">
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      alt="benjamincanac"
    />
    <UAvatar
      src="https://avatars.githubusercontent.com/u/904724?v=4"
      alt="Atinux"
    />
    <UAvatar
      src="https://avatars.githubusercontent.com/u/7547335?v=4"
      alt="smarroufin"
    />
  </UAvatarGroup>
</template>

Props

Avatar Props

Prop	Type	Default

| as | string | Record<string, any> | "img" | | size | AvatarSize | "sm" | | ui | Object | {} | | icon | string | config.default.icon | | text | string | null | | src | string | boolean | null | | alt | string | null | | chipColor | string | config.default.chipColor | | chipPosition | "top-right" | "bottom-right" | "top-left" | "bottom-left" | config.default.chipPosition | | chipText | string | number | null | | imgClass | string | "" |

AvatarGroup Props

Prop	Type	Default	Description
ui	Object	{}	Custom UI configuration
size	AvatarSize	null	Size of all avatars in the group
max	number	null	Maximum number of avatars to display

Config

Avatar Configuration

{
  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
  background: 'bg-gray-100 dark:bg-gray-800',
  rounded: 'rounded-full',
  text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
  placeholder: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
  size: {
    '3xs': 'h-4 w-4 text-[8px]',
    '2xs': 'h-5 w-5 text-[10px]',
    xs: 'h-6 w-6 text-xs',
    sm: 'h-8 w-8 text-sm',
    md: 'h-10 w-10 text-base',
    lg: 'h-12 w-12 text-lg',
    xl: 'h-14 w-14 text-xl',
    '2xl': 'h-16 w-16 text-2xl',
    '3xl': 'h-20 w-20 text-3xl'
  },
  chip: {
    base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
    background: 'bg-{color}-500 dark:bg-{color}-400',
    position: {
      'top-right': 'top-0 right-0',
      'bottom-right': 'bottom-0 right-0',
      'top-left': 'top-0 left-0',
      'bottom-left': 'bottom-0 left-0'
    },
    size: {
      
      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',

      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',

      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',

      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',

      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',

      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',

      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',

      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',

      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
    }
  },
  icon: {
    base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
    size: {
     
      '3xs': 'h-2 w-2',

      '2xs': 'h-2.5 w-2.5',

      xs: 'h-3 w-3',

      sm: 'h-4 w-4',

      md: 'h-5 w-5',

      lg: 'h-6 w-6',

      xl: 'h-7 w-7',

      '2xl': 'h-8 w-8',

      '3xl': 'h-10 w-10'
    }
  },
  default: {
    size: 'sm',
    icon: null,
    chipColor: null,
    chipPosition: 'top-right'
  }
}

AvatarGroup Configuration

{
  wrapper: 'inline-flex flex-row-reverse justify-end',
  ring: 'ring-2 ring-white dark:ring-gray-900',
  margin: '-me-1.5 first:me-0'
}