ACV Chip

Chips or badges are small, interactive elements that represent a piece of information, such as a tag, a category, or a status.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=876-2858

Basic usage

Text

Text

Text

Text

Source code

<script setup>
  import { IconConsole16 } from '@acronis-platform/icons/console';
  import AcvChip from '@/components/chip/chip.vue';
</script>

<template>
  <AcvChip>Text</AcvChip>

  <AcvChip :icon="IconConsole16">
    Text
  </AcvChip>

  <AcvChip show-close>
    Text
  </AcvChip>

  <AcvChip
    :icon="IconConsole16"
    show-close
  >
    Text
  </AcvChip>
</template>

Long text with ellipsis

Long textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreak

Source code

<script setup>
  import AcvChip from '@/components/chip/chip.vue';

  const text = 'Long text'.repeat(20) + 'Nobreak'.repeat(30);
</script>

<template>
  <AcvChip>{{ text }}</AcvChip>
</template>

Related components

• Icon
• Button

Props

Prop name	Description	Type	Values	Default
icon	Icon name of the Chip	string	-
showClose	Is close icon visible	boolean	-	false
showHoverHint	Is hover hint visible	boolean	-	false

Events

Event name	Properties	Description
close		Emitted when the close icon is clicked.

Slots

Name	Description	Bindings
default