Vue Badge Component - Bitrix24 UI

Usage

Label

Use the default slot to set the label of the Badge.

Badge

<template>
  <B24Badge>Badge</B24Badge>
</template>

You can achieve the same result by using the label prop.

Use the use-link prop to show underline.

label

useLink

Badge

<template>
  <B24Badge label="Badge" use-link />
</template>

Color

Use the color prop to change the color of the Badge.

color

Badge

<template>
  <B24Badge color="air-primary">Badge</B24Badge>
</template>

Inverted

Use the inverted prop to invert the color of the Badge.

Only available for air-primary* colors

inverted

color

Badge

<template>
  <B24Badge inverted color="air-primary">Badge</B24Badge>
</template>

Size

Use the size prop to change the size of the Badge.

size

Badge

<template>
  <B24Badge size="xl">Badge</B24Badge>
</template>

Icon

Use the icon prop to show an Icon inside the Badge.

size

color

Badge

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

<template>
  <B24Badge :icon="RocketIcon" size="md" color="air-primary">Badge</B24Badge>
</template>

Use the use-close prop to show close icon.

useClose

size

color

Badge

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

<template>
  <B24Badge use-close :icon="RocketIcon" size="md" color="air-primary">Badge</B24Badge>
</template>

Avatar

Use the avatar prop to show an Avatar inside the Badge.

size

color

Badge

<template>
  <B24Badge
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    size="xl"
    color="air-primary"
  >
    Badge
  </B24Badge>
</template>

API

Props

Prop	Default	Type
`as`	`'span'`	`any` The element or component this component should render as.
`label`		`string \| number`
`color`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-tertiary" \| "air-selection"`
`inverted`	`false`	`boolean` If set to `true` the color is inverted. Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
`size`	`'md'`	`"xss" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`
`square`		`boolean` Render the badge with equal padding on all sides.
`useLink`	`false`	`boolean` Shows 'underline' on hover
`useClose`	`false`	`boolean` Shows icons.close on the right side
`onCloseClick`		`(event: MouseEvent): void \| Promise<void> \| ((event: MouseEvent) => void \| Promise<void>)[]`
`icon`		`IconComponent` Display an icon on the left side.
`avatar`		`AvatarProps` Display an avatar on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`IconComponent` Display an icon on the right side.
`b24ui`		`{ base?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{ b24ui: object; }`
`default`	`{ b24ui: object; }`
`trailing`	`{ b24ui: object; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    badge: {
      slots: {
        base: 'ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width)',
        wrapper: 'h-(--ui-label-height) inline-flex items-center',
        label: 'max-w-full whitespace-nowrap text-ellipsis decoration-from-font',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailingIcon: 'shrink-0 cursor-pointer hover:rounded-(--ui-border-radius-circle) hover:bg-current/20'
      },
      variants: {
        fieldGroup: {
          horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
          vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        noSplit: {
          false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
        },
        useLink: {
          true: {
            base: 'cursor-pointer',
            wrapper: 'group',
            label: 'group-hover:underline group-hover:decoration-dashed'
          }
        },
        useClose: {
          true: 'pe-2xs',
          false: ''
        },
        leading: {
          true: 'ps-1',
          false: ''
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          'air-secondary': {
            base: 'style-tinted'
          },
          'air-secondary-alert': {
            base: 'style-tinted-alert'
          },
          'air-secondary-accent': {
            base: 'style-outline'
          },
          'air-secondary-accent-1': {
            base: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            base: 'style-outline-accent-2'
          },
          'air-tertiary': {
            base: 'style-outline-no-accent'
          },
          'air-selection': {
            base: 'style-selection'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        size: {
          xss: {
            base: 'ui-label-xss gap-0.5',
            wrapper: 'gap-0.5',
            label: 'underline-offset-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'ui-label-xs gap-0.5',
            wrapper: 'gap-0.5',
            label: 'underline-offset-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          sm: {
            base: 'ui-label-sm gap-1',
            wrapper: 'gap-1',
            label: 'underline-offset-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          md: {
            base: 'ui-label-md gap-1',
            wrapper: 'gap-1',
            label: 'underline-offset-1',
            leadingIcon: 'size-[15px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[15px]'
          },
          lg: {
            base: 'ui-label-lg gap-1',
            wrapper: 'gap-1',
            label: '',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'ui-label-xl gap-1',
            wrapper: 'gap-1',
            label: '',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        square: {
          true: {
            base: 'rounded-[calc(var(--ui-label-height)_/_4)] ',
            wrapper: 'w-(--ui-label-height)',
            label: 'overflow-hidden'
          },
          false: {
            base: 'rounded-[calc(var(--ui-label-height)_/_2)]'
          }
        },
        inverted: {
          true: {
            base: 'border-(--b24ui-color)'
          },
          false: ''
        }
      },
      compoundVariants: [
        {
          inverted: true,
          color: 'air-primary',
          class: {
            base: 'style-filled-inverted'
          }
        },
        {
          size: 'xss',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'px-[2px] gap-0',
            leadingIcon: 'size-[6px]'
          }
        },
        {
          size: 'xs',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'px-[2px] gap-0',
            leadingIcon: 'size-[10px]'
          }
        },
        {
          size: 'sm',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[16px]'
          }
        },
        {
          size: 'md',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[18px]'
          }
        },
        {
          size: 'lg',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[23px]'
          }
        },
        {
          size: 'xl',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[28px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md',
        square: false,
        inverted: false
      }
    }
  }
})

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: {
        badge: {
          slots: {
            base: 'ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width)',
            wrapper: 'h-(--ui-label-height) inline-flex items-center',
            label: 'max-w-full whitespace-nowrap text-ellipsis decoration-from-font',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailingIcon: 'shrink-0 cursor-pointer hover:rounded-(--ui-border-radius-circle) hover:bg-current/20'
          },
          variants: {
            fieldGroup: {
              horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
              vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
            },
            noSplit: {
              false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
            },
            useLink: {
              true: {
                base: 'cursor-pointer',
                wrapper: 'group',
                label: 'group-hover:underline group-hover:decoration-dashed'
              }
            },
            useClose: {
              true: 'pe-2xs',
              false: ''
            },
            leading: {
              true: 'ps-1',
              false: ''
            },
            color: {
              'air-primary': {
                base: 'style-filled'
              },
              'air-primary-success': {
                base: 'style-filled-success'
              },
              'air-primary-alert': {
                base: 'style-filled-alert'
              },
              'air-primary-copilot': {
                base: 'style-filled-copilot'
              },
              'air-primary-warning': {
                base: 'style-filled-warning'
              },
              'air-secondary': {
                base: 'style-tinted'
              },
              'air-secondary-alert': {
                base: 'style-tinted-alert'
              },
              'air-secondary-accent': {
                base: 'style-outline'
              },
              'air-secondary-accent-1': {
                base: 'style-outline-accent-1'
              },
              'air-secondary-accent-2': {
                base: 'style-outline-accent-2'
              },
              'air-tertiary': {
                base: 'style-outline-no-accent'
              },
              'air-selection': {
                base: 'style-selection'
              },
              default: {
                base: 'style-old-default'
              },
              danger: {
                base: 'style-old-danger'
              },
              success: {
                base: 'style-old-success'
              },
              warning: {
                base: 'style-old-warning'
              },
              primary: {
                base: 'style-old-primary'
              },
              secondary: {
                base: 'style-old-secondary'
              },
              collab: {
                base: 'style-old-collab'
              },
              ai: {
                base: 'style-old-ai'
              }
            },
            size: {
              xss: {
                base: 'ui-label-xss gap-0.5',
                wrapper: 'gap-0.5',
                label: 'underline-offset-1',
                leadingIcon: 'size-[12px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[12px]'
              },
              xs: {
                base: 'ui-label-xs gap-0.5',
                wrapper: 'gap-0.5',
                label: 'underline-offset-1',
                leadingIcon: 'size-[12px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[12px]'
              },
              sm: {
                base: 'ui-label-sm gap-1',
                wrapper: 'gap-1',
                label: 'underline-offset-1',
                leadingIcon: 'size-[14px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[14px]'
              },
              md: {
                base: 'ui-label-md gap-1',
                wrapper: 'gap-1',
                label: 'underline-offset-1',
                leadingIcon: 'size-[15px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[15px]'
              },
              lg: {
                base: 'ui-label-lg gap-1',
                wrapper: 'gap-1',
                label: '',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]'
              },
              xl: {
                base: 'ui-label-xl gap-1',
                wrapper: 'gap-1',
                label: '',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]'
              }
            },
            square: {
              true: {
                base: 'rounded-[calc(var(--ui-label-height)_/_4)] ',
                wrapper: 'w-(--ui-label-height)',
                label: 'overflow-hidden'
              },
              false: {
                base: 'rounded-[calc(var(--ui-label-height)_/_2)]'
              }
            },
            inverted: {
              true: {
                base: 'border-(--b24ui-color)'
              },
              false: ''
            }
          },
          compoundVariants: [
            {
              inverted: true,
              color: 'air-primary',
              class: {
                base: 'style-filled-inverted'
              }
            },
            {
              size: 'xss',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'px-[2px] gap-0',
                leadingIcon: 'size-[6px]'
              }
            },
            {
              size: 'xs',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'px-[2px] gap-0',
                leadingIcon: 'size-[10px]'
              }
            },
            {
              size: 'sm',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'p-[1px] gap-0',
                leadingIcon: 'size-[16px]'
              }
            },
            {
              size: 'md',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'p-[1px] gap-0',
                leadingIcon: 'size-[18px]'
              }
            },
            {
              size: 'lg',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'p-[1px] gap-0',
                leadingIcon: 'size-[23px]'
              }
            },
            {
              size: 'xl',
              square: true,
              class: {
                base: 'p-0 ps-0 pe-0',
                wrapper: 'p-[1px] gap-0',
                leadingIcon: 'size-[28px]'
              }
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: [
                'xl',
                'lg',
                'md'
              ],
              class: 'rounded-(--ui-border-radius-md)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'sm',
              class: 'rounded-(--ui-border-radius-sm)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xs',
              class: 'rounded-(--ui-border-radius-xs)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xss',
              class: 'rounded-[5px]'
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md',
            square: false,
            inverted: false
          }
        }
      }
    })
  ]
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

AvatarGroup

Pile multiple avatars into a single group.

Banner

Top banner for important user messages.