Avatar

Usage

src

alt

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

Size

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

size

<UAvatar size="sm" />

Chip

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

chipColor

primary

chipText

chipPosition

size

<UAvatar chip-color="primary" chip-text="" chip-position="top-right" size="sm" />

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.

<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

size

sm

max

+1

<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

Preset

undefined