A chip component for filters and tags with removable option, built with Lit.
npm install @litforge/chipA chip component for filters and tags with removable option, built with Lit.
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.
``bash`
npm install @litforge/chipor
pnpm add @litforge/chipor
yarn add @litforge/chip
`html
`
| 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 |
Fired when the remove button is clicked.
Detail: { chip: Chip }
`html`
`html`
`html`
`html`
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``
import { Chip, ChipVariant, ChipSize } from '@litforge/chip';
Part of the LitForge component library.