v3.0.0-alpha.9

Avatar

AvatarGitHub
An img element with fallback and Nuxt Image support.

Usage

The Avatar uses the NuxtImg component when @nuxt/image is installed, falling back to img otherwise.

Src

Use the src prop to set the image URL. You can pass any property from HTML <img> element such as alt, loading, etc.

<template>
  <UAvatar src="https://github.com/benjamincanac.png" />
</template>

Size

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

<template>
  <UAvatar src="https://github.com/benjamincanac.png" size="xl" />
</template>
The <img> element's width and height are automatically set based on the size prop.

Icon

Use the icon prop to display a fallback Icon.

<template>
  <UAvatar icon="i-lucide-image" />
</template>

Text

Use the text prop to display a fallback text.

+1
<template>
  <UAvatar text="+1" />
</template>

Alt

When no icon or text is provided, the initials of the alt prop is used as fallback.

BC
<template>
  <UAvatar alt="Benjamin Canac" />
</template>
The alt prop is passed to the img element as the alt attribute.

Examples

With tooltip

You can use a Tooltip component to display a tooltip when hovering the Avatar.

BC
<template>
  <UTooltip text="Benjamin Canac">
    <UAvatar
      src="https://github.com/benjamincanac.png"
      alt="Benjamin Canac"
    />
  </UTooltip>
</template>

With chip

You can use a Chip component to display a chip around the Avatar.

BC
<template>
  <UChip inset>
    <UAvatar
      src="https://github.com/benjamincanac.png"
      alt="Benjamin Canac"
    />
  </UChip>
</template>

API

Props

Prop Default Type
as

"span"

any

The element or component this component should render as.

src

string

alt

string

icon

string

text

string

size

md

"2xl" | "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "3xl"

delayMs

number

Useful for delaying rendering so it only appears for those with slower connections.

ui

Partial<{ root: string; image: string; fallback: string; icon: string; }>

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    avatar: {
      slots: {
        root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]',
        image: 'h-full w-full rounded-[inherit] object-cover',
        fallback: 'font-medium leading-none text-[var(--ui-text-muted)] truncate',
        icon: 'text-[var(--ui-text-muted)] shrink-0'
      },
      variants: {
        size: {
          '3xs': {
            root: 'size-4 text-[8px]'
          },
          '2xs': {
            root: 'size-5 text-[10px]'
          },
          xs: {
            root: 'size-6 text-xs'
          },
          sm: {
            root: 'size-7 text-sm'
          },
          md: {
            root: 'size-8 text-base'
          },
          lg: {
            root: 'size-9 text-lg'
          },
          xl: {
            root: 'size-10 text-xl'
          },
          '2xl': {
            root: 'size-11 text-[22px]'
          },
          '3xl': {
            root: 'size-12 text-2xl'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

Alert

A callout to draw user's attention.

AvatarGroup

Stack multiple avatars in a group.