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" />
</template>
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="https://github.com/bitrix24.png" />
</template>
Size
Use the size prop to set the size of the Avatar.
<template>
<B24Avatar size="2xl" src="/b24ui/avatar/assistant.png" />
</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.
<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.
<template>
<B24Avatar alt="Employee Name" size="xl" />
</template>
The
alt prop is passed to the img element as the alt attribute.Chip
Use the chip prop to display a chip around the Avatar.
+1<template>
<B24Avatar
src="/b24ui/avatar/assistant.png"
: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
app.config.ts
export default defineAppConfig({
b24ui: {
avatar: {
slots: {
root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate',
icon: 'text-(--ui-color-design-plain-content-icon-secondary) shrink-0'
},
variants: {
size: {
'3xs': {
root: 'size-[10px] text-4xs font-(--ui-font-weight-regular)',
icon: 'size-[10px]'
},
'2xs': {
root: 'size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-[18px]'
},
xs: {
root: 'size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-[22px]'
},
sm: {
root: 'size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)',
icon: 'size-[26px]'
},
md: {
root: 'size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
icon: 'size-[28px]'
},
lg: {
root: 'size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-[38px]'
},
xl: {
root: 'ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-[44px]'
},
'2xl': {
root: 'ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)',
icon: 'size-[56px]'
},
'3xl': {
root: 'ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)',
icon: 'size-[90px]'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
avatar: {
slots: {
root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate',
icon: 'text-(--ui-color-design-plain-content-icon-secondary) shrink-0'
},
variants: {
size: {
'3xs': {
root: 'size-[10px] text-4xs font-(--ui-font-weight-regular)',
icon: 'size-[10px]'
},
'2xs': {
root: 'size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-[18px]'
},
xs: {
root: 'size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
icon: 'size-[22px]'
},
sm: {
root: 'size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)',
icon: 'size-[26px]'
},
md: {
root: 'size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
icon: 'size-[28px]'
},
lg: {
root: 'size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-[38px]'
},
xl: {
root: 'ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
icon: 'size-[44px]'
},
'2xl': {
root: 'ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)',
icon: 'size-[56px]'
},
'3xl': {
root: 'ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)',
icon: 'size-[90px]'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})