FilterChip

Removable chip component for displaying active filters. Wraps MUI Chip with CSS variable-based theming and supports filled/outlined variants with custom colors.

Filter Chip Types
Customer: Acme Corp
Status: Open
Date: Mar 1 - Mar 15
Manufacturer: Widget Co
Entity, Status, Date Range, and Manufacturer filter types shown above.

Active Filters Demo

Active Filters:
Customer: Acme Corp
Status: Open
Date: Mar 1 - Mar 15
Manufacturer: Widget Co
4 of 4 filters active

Usage

JSX
import { FilterChip } from '@so.boss/gloss-ui';

<FilterChip
  id="status-1"
  label="Status: Active"
  field="status"
  value="active"
  onRemove={(id) => removeFilter(id)}
/>

// With custom color
<FilterChip
  id="date-1"
  label="Date: Mar 1 - Mar 15"
  field="dateRange"
  value="2026-03-01..2026-03-15"
  onRemove={(id) => removeFilter(id)}
  color="rgba(25, 118, 210, 0.12)"
/>

Props Reference

PropTypeDefaultDescription
idstring—Unique chip identifier, passed to onRemove
labelstring—Display text for the chip
fieldstring—Filter field name (consumer metadata)
valuestring—Filter value (consumer metadata)
onRemove(id: string) => void—Called with chip id when delete icon is clicked
colorstring—Custom background color override
variant'filled' | 'outlined''filled'MUI Chip visual variant
size'small' | 'medium''small'Chip size