componente · @solu30/ui-kit/input
FilterChip
Chip de filtro activo con una cruz para sacarlo, en cuatro colores.
Seguir leyendo — 2 párrafos más
Removable filter chip for active-filter lists and tag displays.
Renders a compact pill with a label and an X button. Clicking anywhere on the chip calls onRemove. Use variant for semantic colors or style for dynamic/custom colors (e.g. supplier-specific palette).
7 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- cmp-packages
- dietaly
- gestorsalon
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { FilterChip } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| label | sí | string | Chip label |
| onRemove | sí | () => void | Called when the X button is clicked |
| variant | opcional | FilterChipVariant | Preset color variant |
| style | opcional | React__default.CSSProperties | Custom inline style — use for dynamic colors (e.g. supplier-specific) |
| className | opcional | string | Additional CSS class |
Ejemplo del paquete
<FilterChip label="Categoría" onRemove={() => clearCategory()} />
<FilterChip label="Bajo pedido" variant="info" onRemove={() => clearAvailability()} />
<FilterChip label="Sin costo" variant="warning" onRemove={() => clearNoCost()} />
<FilterChip label="BioSalud" style={{ backgroundColor: 'var(--color-green-bg)', color: 'var(--color-green)' }} onRemove={() => removeSupplier(sid)} />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.