Chip

The Chip component is a compact element used to display information, tags, or actions. It supports various design variants, sizes, removable functionality, custom actions, and can be used standalone or within a Chip List container. Perfect for tags, filters, badges, and interactive labels.

Basic chip

The Chip component displays a simple text label with optional styling.

Basic Chip

Source code

<template>
  <IkChip>Basic Chip</IkChip>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
</script>

Design variants

Use the design prop to apply different color themes: accent, error, success, primary, or default.

Default

Primary

Accent

Success

Error

Source code

<template>
  <IkChipList>
    <IkChip design="default">Default</IkChip>
    <IkChip design="primary">Primary</IkChip>
    <IkChip design="accent">Accent</IkChip>
    <IkChip design="success">Success</IkChip>
    <IkChip design="error">Error</IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Sizes

Control the chip size using the size prop. Available sizes are xs, sm, and md (default).

Extra Small

Small

Medium

Source code

<template>
  <IkChipList>
    <IkChip size="xs">Extra Small</IkChip>
    <IkChip size="sm">Small</IkChip>
    <IkChip size="md">Medium</IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Removable chips

Add a remove button to chips using the removable prop. Handle removal with the @ik-remove event.

Removable Chip

Success Chip

Error Chip

Source code

<template>
  <IkChipList>
    <IkChip removable @ik-remove="handleRemove">Removable Chip</IkChip>
    <IkChip removable design="success" @ik-remove="handleRemove">Success Chip</IkChip>
    <IkChip removable design="error" @ik-remove="handleRemove">Error Chip</IkChip>
  </IkChipList>
  <p v-if="message" class="ik-text--sm ik-text--default-light ik-mt-4">{{ message }}</p>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
import { ref } from 'vue';

const message = ref('');

const handleRemove = () => {
  message.value = 'Chip removed!';
  setTimeout(() => message.value = '', 2000);
};
</script>

Custom action

Add a custom action icon to chips using the custom_action prop. Handle clicks with the @ik-custom-click event.

Editable

Copyable

Favorite

Source code

<template>
  <IkChipList>
    <IkChip custom_action="edit" @ik-custom-click="handleEdit">Editable</IkChip>
    <IkChip custom_action="copy" @ik-custom-click="handleCopy">Copyable</IkChip>
    <IkChip custom_action="star" @ik-custom-click="handleStar">Favorite</IkChip>
  </IkChipList>
  <p v-if="message" class="ik-text--sm ik-text--default-light ik-mt-4">{{ message }}</p>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
import { ref } from 'vue';

const message = ref('');

const handleEdit = () => {
  message.value = 'Edit clicked!';
  setTimeout(() => message.value = '', 2000);
};

const handleCopy = () => {
  message.value = 'Copy clicked!';
  setTimeout(() => message.value = '', 2000);
};

const handleStar = () => {
  message.value = 'Star clicked!';
  setTimeout(() => message.value = '', 2000);
};
</script>

Removable and custom action

You can combine both removable and custom_action props in a single chip.

Editable & Removable

Source code

<template>
  <IkChipList>
    <IkChip removable custom_action="edit" @ik-custom-click="handleAction" @ik-remove="handleRemove">
      Editable & Removable
    </IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';

const handleAction = () => {
  // Handle custom action
};

const handleRemove = () => {
  // Handle remove
};
</script>

Prefix slot

Add custom content before the chip text using the prefix slot.

Tagged Item

✓

Verified

NEW

Custom Prefix

Source code

<template>
  <IkChipList>
    <IkChip>
      <template #prefix>
        <span class="ik-text--xs ik-text--default-light">#</span>
      </template>
      Tagged Item
    </IkChip>
    <IkChip design="success">
      <template #prefix>
        <span class="ik-text--xs ik-text--default-light">✓</span>
      </template>
      Verified
    </IkChip>
    <IkChip>
      <template #prefix>
        <span class="ik-text--xs ik-text--default-light">NEW</span>
      </template>
      Custom Prefix
    </IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Disabled state

Use the disabled prop to prevent interaction with the chip.

Enabled Chip

Disabled Chip

Disabled Removable

Disabled Error

Source code

<template>
  <IkChipList>
    <IkChip>Enabled Chip</IkChip>
    <IkChip disabled>Disabled Chip</IkChip>
    <IkChip disabled removable>Disabled Removable</IkChip>
    <IkChip disabled design="error">Disabled Error</IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Custom color

Use the color prop to set a custom background color. The text color will automatically adjust for contrast. For dark colors, the text automatically inverts to white for better readability. Note: design and color props should not be used together.

Light colors (dark text)

Custom Red

Custom Teal

Custom Blue

Custom Orange

Custom Mint

Dark colors (white text)

Dark Blue

Dark Brown

Almost Black

Dark Purple

Dark Green

Source code

<template>
  <div>
    <h4 class="ik-text--sm ik-text--default-regular ik-mb-3">Light colors (dark text)</h4>
    <IkChipList class="ik-mb-6">
      <IkChip color="FF6B6B">Custom Red</IkChip>
      <IkChip color="4ECDC4">Custom Teal</IkChip>
      <IkChip color="45B7D1">Custom Blue</IkChip>
      <IkChip color="FFA07A">Custom Orange</IkChip>
      <IkChip color="98D8C8">Custom Mint</IkChip>
    </IkChipList>
    
    <h4 class="ik-text--sm ik-text--default-regular ik-mb-3">Dark colors (white text)</h4>
    <IkChipList>
      <IkChip color="2C3E50">Dark Blue</IkChip>
      <IkChip color="8B4513">Dark Brown</IkChip>
      <IkChip color="1A1A1A">Almost Black</IkChip>
      <IkChip color="4A148C">Dark Purple</IkChip>
      <IkChip color="1B5E20">Dark Green</IkChip>
    </IkChipList>
  </div>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Flat variant

Use the flat prop to display a chip with a flat, borderless style.

Flat Chip

Flat Primary

Flat Success

Flat Error

Source code

<template>
  <IkChipList>
    <IkChip flat>Flat Chip</IkChip>
    <IkChip flat design="primary">Flat Primary</IkChip>
    <IkChip flat design="success">Flat Success</IkChip>
    <IkChip flat design="error">Flat Error</IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>

Chip list

Use the IkChipList component as a container to group multiple chips together with consistent spacing.

Tag 1

Tag 2

Tag 3

Tag 4

Removable Tag

Source code

<template>
  <IkChipList>
    <IkChip>Tag 1</IkChip>
    <IkChip design="primary">Tag 2</IkChip>
    <IkChip design="success">Tag 3</IkChip>
    <IkChip design="error">Tag 4</IkChip>
    <IkChip removable>Removable Tag</IkChip>
  </IkChipList>
</template>
<script setup>
import { IkChip } from '@ikol/ui-kit/components/IkChip';
import { IkChipList } from '@ikol/ui-kit/components/IkChipList';
</script>