v2.1.8
/
Use our Nuxt starter

Badge

A short descriptor for a status or category.
GitHub
Demo
Nuxt UI

Usage

Label

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

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

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

Use the use-link prop to show underline.

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

Color

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

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

Inverted

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

Only available for air-primary* colors
Badge
{
  "wait": "Loading client-side content..."
}

Size

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

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

Icon

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

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

Use the use-close prop to show close icon.

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

Avatar

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

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

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"
invertedfalseboolean

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"
squareboolean

Render the badge with equal padding on all sides.

useLinkfalseboolean

Shows 'underline' on hover

useClosefalseboolean

Shows icons.close on the right side

onCloseClick (event: MouseEvent): void | Promise<void> | ((event: MouseEvent) => void | Promise<void>)[]
iconIconComponent

Display an icon on the left side.

avatar AvatarProps

Display an avatar on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

trailingIconIconComponent

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.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24