Badge

A short descriptor for a status or category.

Nuxt UI

Git

Usage

Label

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

<template>
  <B24Badge>Badge</B24Badge>
  <B24Badge use-fill>
    Badge
  </B24Badge>
  <B24Badge use-fill use-link>
    Badge
  </B24Badge>
</template>

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

Use the use-link prop to show underline.

Details

<script setup lang="ts">
export interface ExampleProps {
  label?: string
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Badge'
})
</script>

<template>
  <B24Badge :label="label" />
  <B24Badge use-fill :label="label" />
  <B24Badge use-fill use-link :label="label" />
</template>

Color

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

Use the use-fill prop to change the filling of the Badge.

Details

<script setup lang="ts">
import type { BadgeProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  label?: string
  color: BadgeProps['color']
  isFill?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default' as const,
  label: 'Badge',
  isFill: true
})
</script>

<template>
  <B24Badge
    :label="label"
    :color="color"
    :use-fill="isFill"
  />
</template>

Depth

Use the depth parameter to change the intensity of the Badge.

Details

<script setup lang="ts">
import type { BadgeProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  label?: string
  depth?: BadgeProps['depth']
  color: BadgeProps['color']
  isFill?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark' as const,
  color: 'default' as const,
  label: 'Badge',
  isFill: true
})
</script>

<template>
  <B24Badge
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
  />
</template>

Size

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

Details

<script setup lang="ts">
import type { BadgeProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  label?: string
  depth?: BadgeProps['depth']
  color: BadgeProps['color']
  size?: BadgeProps['size']
  isFill?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const,
  label: 'Badge',
  isFill: true
})
</script>

<template>
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
  />
</template>

Icon

Use the icon prop to show an @bitrix24/b24icons inside the Badge.

Use the use-close prop to show close icon.

Details

<script setup lang="ts">
import type { BadgeProps } from '@bitrix24/b24ui-nuxt'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

export interface ExampleProps {
  label?: string
  depth?: BadgeProps['depth']
  color: BadgeProps['color']
  size?: BadgeProps['size']
  isFill?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const,
  label: 'Badge',
  isFill: true
})
</script>

<template>
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
    :icon="InfoIcon"
  />
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
    :icon="InfoIcon"
    use-close
  />
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
    :icon="InfoIcon"
    use-link
  />
</template>

Avatar

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

Details

<script setup lang="ts">
import type { BadgeProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  label?: string
  depth?: BadgeProps['depth']
  color: BadgeProps['color']
  size?: BadgeProps['size']
  isFill?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  depth: 'dark' as const,
  color: 'default' as const,
  size: 'md' as const,
  label: 'Badge',
  isFill: true
})
</script>

<template>
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
  />
  <B24Badge
    :size="size"
    :label="label"
    :color="color"
    :depth="depth"
    :use-fill="isFill"
    :avatar="{ src: '/b24ui/avatar/assistant.png' }"
    use-link
    use-close
  />
</template>

API

Props

Prop	Default	Type
as	"span"	any The element or component this component should render as.
label		string | number
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
depth		"light" | "normal" | "dark"
size		"lg" | "md" | "xs" | "sm" | "xl"
useLink		boolean Shows 'underline' on hover
useClose		boolean Shows `Cross20Icon` icon on the right side
useFill		boolean Fills the background
b24ui		Partial<{ base: string; wrapper: string; label: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailingIcon: string; }>
trailing		boolean When `true`, the icon will be displayed on the right side.
trailingIcon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the right side.
icon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
avatar		AvatarProps Display an avatar on the left side.

Slots

Slot	Type
leading	{}
default	{}
trailing	{}