elements

Avatar

GitHub

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

Usage

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

Size

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

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

Chip

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

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

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.

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

Alt

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

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

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
+1AvatarAvatar
<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>

Props

text
string
null
size
"sm" | "3xs" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl"
config.default.size
icon
string
config.default.icon
src
string | boolean
null
alt
string
null
chipColor
any
config.default.chipColor
chipPosition
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.chipPosition
chipText
string | number
null
imgClass
string
""
ui
any
undefined
AvatarGroup
size
"sm" | "3xs" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl"
null
max
number
null
ui
any
undefined

Config

UAvatar.vue
{  "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"  }}
UAvatarGroup.vue
{  "wrapper": "inline-flex flex-row-reverse justify-end",  "ring": "ring-2 ring-white dark:ring-gray-900",  "margin": "-me-1.5 first:me-0"}

Alert

Display an alert element to draw attention.

Badge

Display a short text to represent a status or a category.