wt-chip.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
color		ChipColor	ChipColor.MAIN	Chip color. "main" and "outline" are chip-specific colors
removable		boolean	false	Makes the chip removable
constrainedByWidth		boolean	false

Events

Name	Params	Description
remove

Slots

Name	Scope	Description
default

Example Chip

+1

Code

<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

<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

<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>