Components
Avatar
Display an image that represents a resource or a group of resources.
Usage
<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.
BC
<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
maxprop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars) - To size all the avatars equally, pass the
sizeprop - To adjust the spacing or the ring between avatars, customize with
ui.avatarGroup.marginorui.avatarGroup.ring
+1
<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
size
AvatarSize
config.default.size"sm""3xs""2xs""xs""md""lg""xl""2xl""3xl"ui
{}
{}text
string
nullicon
string
config.default.iconsrc
string | boolean
nullalt
string
nullchipColor
string
config.default.chipColorchipPosition
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.chipPositionchipText
string | number
nullimgClass
string
""Config
{
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',
},
}