Usage
The Avatar uses the <NuxtImg> component when @nuxt/image is installed, falling back to img otherwise.
<template>
<B24Avatar src="/b24ui/avatar/employee.png" alt="employee" loading="lazy" />
</template>
You can pass any property from the HTML
<img> element such as alt, loading, etc.To opt-out of
@nuxt/image, use the as prop: :as="{ img: 'img' }".Src
Use the src prop to set the image URL.
<template>
<B24Avatar src="https://github.com/bitrix24.png" loading="lazy" />
</template>
Size
Use the size prop to set the size of the Avatar.
<template>
<B24Avatar size="2xl" src="/b24ui/avatar/assistant.png" loading="lazy" />
</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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Avatar :icon="RocketIcon" size="md" />
</template>
Text
Use the text prop to display a fallback text.
+24
<template>
<B24Avatar text="+24" size="xl" />
</template>
Alt
When no icon or text is provided, the initials of the alt prop is used as fallback.
EN
<template>
<B24Avatar alt="Employee Name" size="xl" />
</template>
The
alt prop is passed to the img element as the alt attribute.Color Soon
Use the color prop to change the color of the Avatar.
EN
<template>
<B24Avatar color="air-boost" alt="Employee Name" />
</template>
Chip
Use the chip prop to display a chip around the Avatar.
+1<template>
<B24Avatar
src="/b24ui/avatar/assistant.png"
loading="lazy"
:chip="{
text: '+1',
inset: true,
hideZero: true
}"
/>
</template>
Examples
With tooltip
You can use a Tooltip component to display a tooltip when hovering the Avatar.
With mask
You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.
API
Props
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/avatar.ts
export default {
slots: {
root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color)',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-(--ui-font-weight-medium) text-(--b24ui-color) truncate',
icon: 'text-(--b24ui-icon) shrink-0'
},
variants: {
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
},
'air-primary-no-accent': {
root: 'style-filled-no-accent'
},
'air-secondary': {
root: 'style-tinted'
},
'air-secondary-alert': {
root: 'style-tinted-alert'
},
'air-secondary-accent': {
root: 'style-outline'
},
'air-secondary-accent-1': {
root: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
root: 'style-outline-accent-2'
},
'air-secondary-no-accent': {
root: 'style-outline-no-accent'
},
'air-tertiary': {
root: 'style-plain'
},
'air-tertiary-accent': {
root: 'style-plain-accent'
},
'air-tertiary-no-accent': {
root: 'style-plain-no-accent'
},
'air-selection': {
root: 'style-selection'
},
'air-boost': {
root: 'style-filled-boost'
}
},
size: {
'3xs': {
root: 'size-2.5 text-4xs font-(--ui-font-weight-regular)',
icon: 'size-2.5'
},
'2xs': {
root: 'size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-4.5'
},
xs: {
root: 'size-6 text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-5.5'
},
sm: {
root: 'size-7 text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)',
icon: 'size-6.5'
},
md: {
root: 'size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
icon: 'size-7'
},
lg: {
root: 'size-10.5 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-9.5'
},
xl: {
root: 'ring-2 size-12 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-11'
},
'2xl': {
root: 'ring-2 size-15 text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)',
icon: 'size-14'
},
'3xl': {
root: 'ring-2 size-23.5 text-8.5/(--ui-font-line-height-reset)',
icon: 'size-22.5'
}
}
},
defaultVariants: {
size: 'md',
color: 'air-secondary-no-accent'
}
}