v2.1.8
/
Use our Nuxt starter

Avatar

An img element that includes fallback and supports Nuxt Image.
GitHub
Demo
Nuxt UI

Usage

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

employee
{
  "wait": "Loading client-side content..."
}
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.

{
  "wait": "Loading client-side content..."
}

Size

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

{
  "wait": "Loading client-side content..."
}
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.

{
  "wait": "Loading client-side content..."
}

Text

Use the text prop to display a fallback text.

+24
{
  "wait": "Loading client-side content..."
}

Alt

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

EN
{
  "wait": "Loading client-side content..."
}
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
{
  "wait": "Loading client-side content..."
}

Examples

With tooltip

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

Employee Name
{
  "wait": "Loading client-side content..."
}

With mask

You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.

Employee Name
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'span'any

The element or component this component should render as.

src string
alt string
iconIconComponent

Display an icon on the left side.

text string
size'md' "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
chipboolean | ChipProps
crossorigin "" | "anonymous" | "use-credentials"
decoding "async" | "auto" | "sync"
height string | number
loading "lazy" | "eager"
referrerpolicy "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
sizes string
srcset string
usemap string
width string | number
b24ui { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }
This component also supports all native <img> HTML attributes.

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'
          }
        }
      }
    })
  ]
})

Alert

An alert designed to capture the user's attention.

AvatarGroup

Pile multiple avatars into a single group.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24