Chip

Compact interactive tag for filters, selections, and categorization.

Open in Storybook

Interactive Demo

Activated Closable Disabled

Variants

Chip styles

Usage

<script setup>
import { Chip } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Chip label="Bitcoin" />
  <Chip label="Active" closable @close="handleRemove" />
</template>

API Reference

Props

Prop	Type	Default	Description
label*	string	—	Chip text content
size	string	—	Chip size
variant	string	—	Visual style variant
radius	string	—	Border radius style
closable	boolean	false	Show close/remove button
activated	boolean	false	Active/selected state
disabled	boolean	false	Disabled state
type	string	—	Chip type
ariaLabel	string	—	Accessible label
closeAriaLabel	string	—	Accessible label for close button