@litforge/chip

A chip component for filters and tags with removable option, built with Lit.

Overview

The Chip component provides a way to display filters, tags, or labels with an optional remove button. It's designed for use in filter bars and tag lists.

Installation

npm install @litforge/chip
# or
pnpm add @litforge/chip
# or
yarn add @litforge/chip

Basic Usage

<script type="module">
  import '@litforge/chip';
</script>

<lf-chip label="Productivity" variant="primary" removable @chip-remove=${handleRemove}></lf-chip>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | '' | Chip label text | | variant | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral' | 'neutral' | Chip color variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Chip size | | removable | boolean | false | Show remove button |

Events

chip-remove

Fired when the remove button is clicked.

Detail: { chip: Chip }

Examples

Basic Chip

<lf-chip label="Tag"></lf-chip>

Removable Chip

<lf-chip label="Filter" removable @chip-remove=${handleRemove}></lf-chip>

Variants

<lf-chip label="Primary" variant="primary"></lf-chip>
<lf-chip label="Success" variant="success"></lf-chip>
<lf-chip label="Warning" variant="warning"></lf-chip>
<lf-chip label="Danger" variant="danger"></lf-chip>
<lf-chip label="Info" variant="info"></lf-chip>
<lf-chip label="Neutral" variant="neutral"></lf-chip>

Filter Chips

<div>
  <lf-chip label="Category: Productivity" variant="primary" removable></lf-chip>
  <lf-chip label="Status: Active" variant="success" removable></lf-chip>
</div>

Styling

The component uses CSS variables for theming:

lf-chip {
  --lf-chip-radius: 16px;
  --lf-chip-padding-y: 6px;
  --lf-chip-padding-x: 12px;
  --lf-chip-font-size: 0.875rem;
  --lf-chip-primary-bg: rgba(11, 110, 253, 0.1);
  --lf-chip-primary-color: #0b6efd;
  /* ... more variables */
}

TypeScript

import { Chip, ChipVariant, ChipSize } from '@litforge/chip';

License

Part of the LitForge component library.