Chip

An indicator that shows either a number or a state.

Nuxt UI

Git

Demo

Usage

Wrap any component with a Chip to display an indicator.

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

<template>
  <B24Chip>
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Color

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

Details

<script setup lang="ts">
import MailIcon from '@bitrix24/b24icons-vue/main/MailIcon'
import type { ChipProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  color?: ChipProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})
</script>

<template>
  <B24Chip
    :color="color"
  >
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Size

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

Details

<script setup lang="ts">
import MailIcon from '@bitrix24/b24icons-vue/main/MailIcon'
import type { ChipProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  size?: ChipProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

<template>
  <B24Chip
    :size="size"
  >
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Text

Use the text prop to set the text of the Chip.

Details

<script setup lang="ts">
import MailIcon from '@bitrix24/b24icons-vue/main/MailIcon'
import type { ChipProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  text?: string
  size?: ChipProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  text: '',
  size: 'md' as const
})
</script>

<template>
  <B24Chip
    :text="text"
    :size="size"
  >
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Position

Use the position prop to change the position of the Chip.

Details

<script setup lang="ts">
import MailIcon from '@bitrix24/b24icons-vue/main/MailIcon'
import type { ChipProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  position?: ChipProps['position']
  size?: ChipProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  position: 'bottom-left' as const,
  size: 'md' as const
})
</script>

<template>
  <B24Chip
    :position="position"
    :size="size"
  >
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Inset

Use the inset prop to display the Chip inside the component. This is useful when dealing with rounded components.

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import MailIcon from '@bitrix24/b24icons-vue/main/MailIcon'

export interface ExampleProps {
  isInset?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isInset: true
})
</script>

<template>
  <B24Chip
    :inset="isInset"
    text="+5"
  >
    <B24Avatar src="/b24ui/avatar/employee.png" />
  </B24Chip>
  <B24Chip
    :inset="isInset"
  >
    <B24Avatar :icon="Bitrix24Icon" />
  </B24Chip>
  <B24Chip
    :inset="isInset"
  >
    <B24Button :icon="MailIcon" depth="light" />
  </B24Chip>
</template>

Standalone

Use the standalone prop alongside the inset prop to display the Chip inline.

Details

<script setup lang="ts">
export interface ExampleProps {
  isStandalone?: boolean
  isInset?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isStandalone: true,
  isInset: true
})
</script>

<template>
  <B24Chip
    :standalone="isStandalone"
    :inset="isInset"
  />
</template>

INFO

It's used this way in the Select components for example.

Examples

Control visibility

You can control the visibility of the Chip using the show prop.

INFO

In this example, the Chip has a color per status and is displayed when the status is not offline.

Details

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])

const color = computed(() => status.value
  ? {
      online: 'success',
      away: 'warning',
      busy: 'danger',
      offline: 'default'
    }[status.value] as any
  : 'online'
)

const show = computed(() => status.value !== 'offline')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    if (status.value) {
      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
    }
  }, 1000)
})
</script>

<template>
  <B24Chip :color="color" :show="show" inset size="xs">
    <B24Avatar src="/b24ui/avatar/employee.png" size="md" />
  </B24Chip>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
text		string | number Display some text inside the chip.
color	'danger'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link"
size	'sm'	"lg" | "md" | "3xs" | "2xs" | "xs" | "sm" | "xl" | "2xl" | "3xl"
position	'top-right'	"top-left" | "top-right" | "bottom-left" | "bottom-right" The position of the chip.
inset	false	boolean When `true`, keep the chip inside the component for rounded elements
standalone	false	boolean When `true`, render the chip relatively to the parent.
b24ui		{ root?: ClassNameValue; base?: ClassNameValue; }
show	true	boolean

Slots

Slot	Type
default	{}
content	{}