Chip

Etiquetas compactas para filtros, tags y estados. Se vuelven removibles al pasar onRemove, y heredan los seis tonos semánticos del tema.

ARPGpublicadobeta◈parche 2.4

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { Chip } from "@tsukira/ui"; <Chip tone="brand" onRemove={() => quitar(tag)}>  ARPG</Chip>

cambia las props y el código se regenera

Japón

tone

variant

size

removeLabel

children (Texto)

onRemove

ARPGGachaLucha

publicadobetaretiradoparcheneutral

◈sm◈md◈lg

ChipPropsextends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'>

Prop	Tipo	Default	Descripción
`tone`	`'neutral' \| 'brand' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—	Tono semántico.
`variant`	`'subtle' \| 'outline' \| 'solid'`	—	Variante visual.
`size`	`'sm' \| 'md' \| 'lg'`	—	Tamaño.
`leadingIcon`	`ReactNode`	—	Icono al inicio (antes del label).
`trailingIcon`	`ReactNode`	—	Icono al final (después del label, antes del botón remove si existe).
`onRemove`	`(() => void)`	—	Si se pasa, renderea botón ✕ al final que llama esta función.
`onDismiss`	`(() => void)`	—	Alias deprecado de onRemove para consistencia con Alert/Banner.
`removeLabel`	`string`	`'Quitar'`	aria-label del botón remove. Default: `'Quitar'`.
`onClick`	`((e: MouseEvent<HTMLElement>) => void)`	—	Hace toda la chip clickable. Se renderea como `<button>` accesible.