componente · @solu30/ui-kit/input

ChipPill

Píldora de selección a puro clic, más liviana que ChipToggle: sin estado de carga, sin ícono, sin async.

Seguir leyendo — 4 párrafos más

Simple pill-shaped toggle chip for single-select and multi-select option lists.

Lighter than ChipToggle: no async support, no loading state, no icon slot. Use when you need a pure click toggle with ReactNode children (e.g. text + emoji).

Supports asChild (Radix Slot pattern) via forwardRef + prop spread — use as <DropdownMenuTrigger asChild><ChipPill ...>...</ChipPill></DropdownMenuTrigger>.

Uses CSS variables for theming:

--ui-accent / bg-primary for active state
--ui-border / border-content/10 for inactive state

15 sitios de import en 7 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
cmp-packages
dietaly
gestorsalon
luigi
prepchat
raquetea

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

import { ChipPill } from '@solu30/ui-kit/input'

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
active	sí	`boolean`	Whether the chip is in its active/selected state
onClick	opcional	`() => void`	Click handler
children	sí	`React__default.ReactNode`	Chip label — accepts ReactNode for icons + text
disabled	opcional	`boolean`	Disable interaction
className	opcional	`string`	Additional CSS class

Ejemplo del paquete

<ChipPill active={selected === 'morning'} onClick={() => setSelected('morning')}>
  Morning
</ChipPill>

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.