v2.1.8
/
Use our Nuxt starter

Chip

An indicator that shows either a number or a state.
GitHub
Demo
Nuxt UI

Usage

Wrap any component with a Chip to display an indicator.

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

Color

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

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

Inverted

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

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

Size

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

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

Text

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

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

Hide zero

Use the hideZero prop to hide the text if it is equal 0.

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

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon.

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

Position

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

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

Inset

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

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

Standalone

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

{
  "wait": "Loading client-side content..."
}
It's used this way in the InputMenu, Select or SelectMenu components for example.

Examples

Control visibility

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

{
  "wait": "Loading client-side content..."
}
In this example, the Chip has a color per status and is displayed when the status is not offline.

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.

trailingIconIconComponent

The icon displayed on the right side of the chip.

color'danger'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary"
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'sm' "sm" | "md" | "lg"
position'top-right' "top-right" | "bottom-right" | "top-left" | "bottom-left"

The position of the chip.

insetfalseboolean

When true, keep the chip inside the component for rounded elements

standalonefalseboolean

When true, render the chip relatively to the parent.

hideZerofalseboolean

When true, hide chip if value='0'

showtrueboolean
b24ui { root?: ClassNameValue; base?: ClassNameValue; trailingIcon?: ClassNameValue; }

Slots

Slot Type
default{}
content{}
trailing{}

Emits

Event Type
update:show[value: boolean]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    chip: {
      slots: {
        root: 'relative shrink-0 isolate inline-flex items-center justify-center',
        base: 'ui-counter__scope --air font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-medium) select-none relative min-w-(--ui-counter-size) h-(--ui-counter-size) py-0 px-(--ui-counter-inline-space) inline-flex items-center justify-center bg-(--b24ui-background) rounded-(--ui-counter-current-size) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-center align-middle text-(length:--ui-counter-font-size) text-(--b24ui-color) leading-(--ui-counter-current-size) overflow-hidden z-1 text-nowrap',
        trailingIcon: 'size-(--ui-counter-size) text-inherit text-(length:--ui-counter-symbol-font-size) opacity-96 tracking-(--ui-letter-spacing-xl) me-(--ui-counter-symbol-compensation) empty:me-[0]'
      },
      variants: {
        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-no-accent-1'
          },
          'air-secondary-accent': {
            base: 'style-filled-no-accent'
          },
          'air-secondary-accent-1': {
            base: 'style-filled-no-accent-inverted edge-dark:text-(--ui-color-g-content-grey-2)'
          },
          'air-tertiary': {
            base: 'style-outline-no-accent'
          },
          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: {
          sm: 'ui-counter-sm font-(--ui-font-weight-regular)',
          md: 'ui-counter-md',
          lg: 'ui-counter-lg'
        },
        position: {
          'top-right': 'top-0 right-0',
          'bottom-right': 'bottom-0 right-0',
          'top-left': 'top-0 left-0',
          'bottom-left': 'bottom-0 left-0'
        },
        inverted: {
          true: '',
          false: ''
        },
        inset: {
          false: ''
        },
        standalone: {
          true: '',
          false: 'absolute'
        },
        hideZero: {
          true: {
            base: 'data-[value=0]:hidden'
          }
        },
        oneDigit: {
          true: {
            base: 'px-0'
          }
        }
      },
      compoundVariants: [
        {
          position: 'top-right',
          inset: false,
          standalone: false,
          class: '-translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'bottom-right',
          inset: false,
          standalone: false,
          class: 'translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'top-left',
          inset: false,
          standalone: false,
          class: '-translate-y-1/2 -translate-x-1/2 transform'
        },
        {
          position: 'bottom-left',
          inset: false,
          standalone: false,
          class: 'translate-y-1/2 -translate-x-1/2 transform'
        },
        {
          position: 'top-right',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: '-translate-y-1/3 translate-x-1/3 transform'
        },
        {
          position: 'bottom-right',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: 'translate-y-1/3 translate-x-1/3 transform'
        },
        {
          position: 'top-left',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: '-translate-y-1/3 -translate-x-1/3 transform'
        },
        {
          position: 'bottom-left',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: 'translate-y-1/3 -translate-x-1/3 transform'
        },
        {
          inverted: true,
          color: 'air-primary',
          class: {
            base: 'style-filled-inverted'
          }
        }
      ],
      defaultVariants: {
        size: 'sm',
        color: 'air-primary-alert',
        position: 'top-right',
        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: {
        chip: {
          slots: {
            root: 'relative shrink-0 isolate inline-flex items-center justify-center',
            base: 'ui-counter__scope --air font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-medium) select-none relative min-w-(--ui-counter-size) h-(--ui-counter-size) py-0 px-(--ui-counter-inline-space) inline-flex items-center justify-center bg-(--b24ui-background) rounded-(--ui-counter-current-size) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-center align-middle text-(length:--ui-counter-font-size) text-(--b24ui-color) leading-(--ui-counter-current-size) overflow-hidden z-1 text-nowrap',
            trailingIcon: 'size-(--ui-counter-size) text-inherit text-(length:--ui-counter-symbol-font-size) opacity-96 tracking-(--ui-letter-spacing-xl) me-(--ui-counter-symbol-compensation) empty:me-[0]'
          },
          variants: {
            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-no-accent-1'
              },
              'air-secondary-accent': {
                base: 'style-filled-no-accent'
              },
              'air-secondary-accent-1': {
                base: 'style-filled-no-accent-inverted edge-dark:text-(--ui-color-g-content-grey-2)'
              },
              'air-tertiary': {
                base: 'style-outline-no-accent'
              },
              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: {
              sm: 'ui-counter-sm font-(--ui-font-weight-regular)',
              md: 'ui-counter-md',
              lg: 'ui-counter-lg'
            },
            position: {
              'top-right': 'top-0 right-0',
              'bottom-right': 'bottom-0 right-0',
              'top-left': 'top-0 left-0',
              'bottom-left': 'bottom-0 left-0'
            },
            inverted: {
              true: '',
              false: ''
            },
            inset: {
              false: ''
            },
            standalone: {
              true: '',
              false: 'absolute'
            },
            hideZero: {
              true: {
                base: 'data-[value=0]:hidden'
              }
            },
            oneDigit: {
              true: {
                base: 'px-0'
              }
            }
          },
          compoundVariants: [
            {
              position: 'top-right',
              inset: false,
              standalone: false,
              class: '-translate-y-1/2 translate-x-1/2 transform'
            },
            {
              position: 'bottom-right',
              inset: false,
              standalone: false,
              class: 'translate-y-1/2 translate-x-1/2 transform'
            },
            {
              position: 'top-left',
              inset: false,
              standalone: false,
              class: '-translate-y-1/2 -translate-x-1/2 transform'
            },
            {
              position: 'bottom-left',
              inset: false,
              standalone: false,
              class: 'translate-y-1/2 -translate-x-1/2 transform'
            },
            {
              position: 'top-right',
              size: [
                'sm',
                'md',
                'lg'
              ],
              inset: true,
              standalone: false,
              class: '-translate-y-1/3 translate-x-1/3 transform'
            },
            {
              position: 'bottom-right',
              size: [
                'sm',
                'md',
                'lg'
              ],
              inset: true,
              standalone: false,
              class: 'translate-y-1/3 translate-x-1/3 transform'
            },
            {
              position: 'top-left',
              size: [
                'sm',
                'md',
                'lg'
              ],
              inset: true,
              standalone: false,
              class: '-translate-y-1/3 -translate-x-1/3 transform'
            },
            {
              position: 'bottom-left',
              size: [
                'sm',
                'md',
                'lg'
              ],
              inset: true,
              standalone: false,
              class: 'translate-y-1/3 -translate-x-1/3 transform'
            },
            {
              inverted: true,
              color: 'air-primary',
              class: {
                base: 'style-filled-inverted'
              }
            }
          ],
          defaultVariants: {
            size: 'sm',
            color: 'air-primary-alert',
            position: 'top-right',
            inverted: false
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Card

Render the content within a card component comprising a header, body, and footer section.

Collapsible

A collapsible component for showing or hiding its content.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24