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 and chip-position props to display a chip on the Avatar.

chipColor

chipPosition

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

Placeholder

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

If there's an alt prop initials will be displayed on top of the background, customizable in ui.avatar.placeholder.

alt

<UAvatar alt="Benjamin Canac" />

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

max

<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

Prop	Default	Description
`src`	`null`	`string \| boolean`
`alt`	`null`	`string`
`text`	`null`	`string`
`size`	`appConfig.ui.avatar.default.size`	`string`
`chipColor`	`appConfig.ui.avatar.default.chipColor`	`string`
`chipPosition`	`appConfig.ui.avatar.default.chipPosition`	`string`
`ui`	`appConfig.ui.avatar`	`any`

Preset

{
  "wrapper": "relative inline-flex items-center justify-center",
  "background": "bg-gray-100 dark:bg-gray-800",
  "rounded": "rounded-full",
  "placeholder": "text-xs font-medium leading-none text-gray-900 dark:text-white truncate",
  "size": {
    "3xs": "h-4 w-4 text-xs",
    "2xs": "h-5 w-5 text-xs",
    "xs": "h-6 w-6 text-xs",
    "sm": "h-8 w-8 text-sm",
    "md": "h-10 w-10 text-md",
    "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 block rounded-full ring-1 ring-white dark:ring-gray-900",
    "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-1 w-1",
      "2xs": "h-1 w-1",
      "xs": "h-1.5 w-1.5",
      "sm": "h-2 w-2",
      "md": "h-2.5 w-2.5",
      "lg": "h-3 w-3",
      "xl": "h-3.5 w-3.5",
      "2xl": "h-3.5 w-3.5",
      "3xl": "h-4 w-4"
    }
  },
  "default": {
    "size": "sm",
    "chipColor": null,
    "chipPosition": "top-right"
  }
}