Design System
GitHub
FigmaPropósito
Filtrar
Opciones de filtro que se activan y desactivan para acotar una lista.
Siempre pill
Alto de 36 px, totalmente redondeado.
Estado claro
El estado seleccionado se comunica con color y con aria-pressed.
Anatomía
Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.
Hacé clic en un número para ver las propiedades y los tokens de esa parte.
Configuración
El componente real, en vivo.
Estado
La función chipClasses(selected) arma las clases; usala con aria-pressed.
Sin seleccionar.
Grupo interactivo
Probalo: elegí un filtro.
Selección única
El estado lo maneja quien usa el componente.
Tokens
Los tokens globales que usa el CSS real del componente.
| Token | Valor |
|---|---|
| 36px | |
| 16px | |
| 6px | |
| 9999px | |
| 14px | |
| 500 | |
| 1px | |
| #8e8e8e | |
| #ffffff | |
| #1a1a1a | |
| 150ms | |
| cubic-bezier(0.4, 0, 0.2, 1) | |
| #f5f5f5 | |
| 2px | |
| #e30613 | |
| 2px | |
| #e30613 | |
| #ffffff | |
| #e30613 | |
| #c20510 | |
| 4px | |
| 12px | |
| 14px | |
| 20px | |
| 500 | |
| #e30613 | |
| 2px | |
| #c20510 |