@webitel/ui

Appearance

wt-chip.vue ​

Specs ​

Props

Name Required Types Default Description Example Deprecated
color ChipColor ChipColor.MAIN Chip color. "main" and "transfer" are chip-specific colors; the rest follow
the semantic scheme. "info" renders as a light tint with dark text, like
"main", rather than a solid fill.
removable boolean false Makes the chip removable
constrainedByWidth boolean false

Events

Name Params Description
remove

Slots

Name Scope Description
default

Example Chip ​

+1
Code
vue
<script setup></script>

<template>
  <wt-chip>+1</wt-chip>
</template>

<style scoped lang="scss"></style>

Example Chip with different colors ​

main
primary
secondary
success
warning
error
transfer
Code
vue
<script setup>
const colors = [
  'main',
  'primary',
  'secondary',
  'success',
  'warning',
  'error',
  'transfer',
];
</script>

<template>
  <div style="display: flex; flex-wrap: nowrap; gap: 10px">
    <wt-chip
      v-for="color of colors"
      :key="color"
      :color="color"
    >
      {{ color }}
    </wt-chip>
  </div>
</template>

<style scoped lang="scss"></style>

Example removable Chip ​

Remove me
Remove me
Remove me
Code
vue
<script setup></script>

<template>
  <div style="display: flex; flex-wrap: nowrap; gap: 10px">
    <wt-chip removable>Remove me</wt-chip>
    <wt-chip removable>Remove me</wt-chip>
    <wt-chip removable>Remove me</wt-chip>
  </div>
</template>

<style scoped lang="scss"></style>