Chip

Los chips filtran resultados y eligen entre opciones cortas: comunas, deducibles, categorías. Son livianos para que varios convivan en una misma fila.

Toyota Yaris 2021 · JTRX-12

Elige tu seguro

HDI

Full cobertura · Deducible UF 3

$32.490al mes
Mapfre

Pérdida total · Deducible UF 3

$18.990al mes

Anatomía

Una píldora con una etiqueta de una o dos palabras. El ícono adelante da contexto y el botón para descartar aparece solo cuando el chip representa un filtro aplicado.

Providencia
  1. Contenedor
  2. Ícono opcional
  3. Etiqueta
  4. Descartar opcional

Variantes

Las tres variantes comparten forma y cambian solo el peso visual. Usa una sola variante por grupo para que el estado seleccionado se lea de inmediato.

OutlineLa opción por defecto. Funciona sobre fondos blancos y en listas largas.
SoftFiltros rápidos sobre resultados, como deducibles o tipo de taller.
FilledCategorías que cambian el contenido de la sección, como en preguntas frecuentes.

Tamaños

smEtiquetas dentro de tarjetas.
mdEl tamaño estándar para filtros y opciones.
lgCategorías en landings.

Estados

SeleccionadoBorde y fondo indigo para la opción activa.
Taller de marca
UF 3 deducible
DescartableUn filtro aplicado que se puede quitar con un toque.
DeshabilitadoLa opción existe pero no está disponible por ahora.

Uso

Sí
Filtros cortos que se pueden combinar sobre una lista de resultados.
No
Usar un chip como acción principal. Para eso está Button.
Sí
Una sola variante en el grupo, así el seleccionado destaca.
No
Mezclar variantes en un mismo grupo confunde cuál está activo.

Código

import { Chip } from '@carvuk/design-system/components/chip';

<Chip selected={isSelected} onClick={toggle}>Providencia</Chip>
<Chip variant='soft' leadingIcon={<IconAdjustmentsHorizontal />}>Filtros</Chip>
<Chip onDismiss={remove}>Taller de marca</Chip>