@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

``bash
npm install @litforge/chip


or

pnpm add @litforge/chip

or

yarn add @litforge/chip
`

Basic Usage

`html



`

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

$3

Fired when the remove button is clicked.

Detail: { chip: Chip }

Examples

$3

`html

`

$3

`html

`

$3

`html






`

$3

`html



`

Styling

The component uses CSS variables for theming:

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

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

License

Part of the LitForge component library.