Note

This documentation describes the Chip Vue component for native UI views for Xml templates see chip.

Chip

A compact inline label container, typically used to display tags, filter tokens, or status chips. Wraps PrimeVue Chip.

Import

import { Chip } from '@neos/design-system'

Props

None. All content is provided via the default slot.

Slots

Slot	Description
default	Chip content (text, icons, remove buttons, etc.)

Usage Examples

Simple text chip

<Chip>Vue.js</Chip>

Removable filter chip

<Chip v-for="tag in activeTags" :key="tag">
  <HorizontalLayout space="extrasmall" vertical-align="center">
    <Text size="small">{{ tag }}</Text>
    <button icon="close" size="extrasmall" variant="ghost" @click="removeTag(tag)" />
  </HorizontalLayout>
</Chip>

Status tags row

<HorizontalLayout space="small">
  <Chip>Frontend</Chip>
  <Chip>In Review</Chip>
  <Chip>P1</Chip>
</HorizontalLayout>