Avatar

An img element that includes fallback and supports Nuxt Image.

Nuxt UI

Git

Usage

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

INFO

You can pass any property from the HTML <img> element such as alt, loading, etc.

Src

Use the src prop to set the image URL.

<template>
  <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" size="lg" />
</template>

Size

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

INFO

The <img> element's width and height are automatically set based on the size prop.

Details

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  size?: AvatarProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'xl' as const
})
</script>

<template>
  <B24Avatar
    src="/b24ui/avatar/employee.png"
    alt="Employee Name"
    :size="size"
  />
</template>

Icon

Use the icon prop to display a fallback @bitrix24/b24icons.

Details

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Avatar
    :icon="RocketIcon"
    size="lg"
  />
</template>

Text

Use the text prop to display a fallback text.

Details

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  text?: string
  size?: AvatarProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  text: '+24',
  size: 'xl' as const
})
</script>

<template>
  <B24Avatar
    :text="text"
    :size="size"
  />
</template>

Alt

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

INFO

The alt prop is passed to the img element as the alt attribute.

Details

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  alt?: string
  size?: AvatarProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  alt: 'Employee Name',
  size: 'xl' as const
})
</script>

<template>
  <B24Avatar
    :alt="alt"
    :size="size"
  />
</template>

Examples

With tooltip

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

Details

<template>
  <B24Tooltip text="Employee Name">
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
  </B24Tooltip>
</template>

With chip

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

Details

<template>
  <B24Chip inset>
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" size="lg" />
  </B24Chip>
</template>

API

Props

Prop	Default	Type
as	"span"	any The element or component this component should render as.
src		string
alt		string
icon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
text		string
size	'md'	"lg" | "md" | "3xs" | "2xs" | "xs" | "sm" | "xl" | "2xl" | "3xl"
b24ui		{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }