Ficha
- Categoría
- Selection
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:12854
- Fuente
design-system/componentes/FilterChip.md
Activa un filtro de una lista (catálogo de Practicar: nivel, producto, estado). Píldora 36 en objetivo de 44 (DV-25), misma anatomía que Chip. Selected=false: blanca con borde neutro de 1 px; Selected=true: brand primary con ícono check. Menu=true añade un chevron: el chip abre un menú de valores.
Cuándo usarlo
- Filtros del catálogo (nivel, producto, estado); interruptor de subtítulos («CC») y selector de dimensión en el feedback de la calificación (MANIFIESTO 24-oct).
Cuándo NO usarlo
- Preguntas o acciones sugeridas (Chip); navegación entre vistas (pestañas); un solo ajuste on/off (switch).
Anatomía
<button> 44 con píldora 36: check 16 (si está seleccionado) + etiqueta body/sm + chevron-down 16 (si abre menú); padding 16, gap 4.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
label | Label | texto | Básico |
menu | Menu | boolean | false |
selected | Selected | false · true | false |
expanded | — (con Menu) | boolean | — |
onClick, … | — | atributos nativos de <button> | — |
Estados
default · hover · focus · pressed, reales, en las dos selecciones: sin seleccionar (blanco → brand/03-soft → brand/04-tint) y seleccionado (primary → primary-hover → primary-pressed).
Accesibilidad
- Botón con aria-pressed (interruptor); con Menu, aria-haspopup=menu y aria-expanded; Enter/Espacio alterna; el grupo lleva un nombre («Filtrar por nivel»).
Contenido
Una o dos palabras, sentence case («Básico», «En curso»); el conteo solo si ayuda («Pendientes · 3»).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).