Chip

A versatile and reusable chip component that can display content with optional prepend and append slots, and a close button.

Basic Usage

<script setup>
const handleDelete = (value) => {
  console.log('Deleted chip:', value)
}
</script>

<template>
  <OChip 
    chip="Simple Chip"
    :closable="true"
    @onDeleteChip="handleDelete"
  />
</template>

Features

• Supports both string and object-based chips
• Customizable text and value keys for object-based chips
• Optional close button with delete event
• Four slots for flexible content customization:
  • prepend: Content before the main chip content
  • default: Main chip content
  • append: Content after the main chip content
  • close: Custom close button content (defaults to an X icon if not provided)

When to Use

• Displaying tags or labels
• Showing selected items in a multi-select component
• Representing filters or categories
• Displaying user information or status indicators

When Not to Use

• For buttons or interactive elements that perform actions
• For displaying large amounts of information
• As a replacement for badges or status indicators that don't need to be removed