Sistema de diseño
Filter Chip
Es un componente de interfaz que permite a los usuarios seleccionar opciones de un conjunto desplegable para aplicar filtros y refinar datos.
Figma
Storybook
AEM
Overview
Los Filter chips, o etiquetas de filtro, muestran de una forma visualmente clara e intuitiva qué filtros están activos y permiten a los usuarios eliminarlos o modificarlos de manera rápida y sencilla.
Cada chip generalmente representa un filtro aplicado mediante una caja con un texto que describe el filtro. A menudo, también incluye un ícono o símbolo para facilitar la identificación del tipo de filtro aplicado.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Los chips de filtro son interactivos y permiten a los usuarios modificar o eliminar filtros con facilidad. Al ser editables, se presentan en diversas variantes según el estado de cada filtro, ofreciendo una experiencia de usuario fluida y flexible.
Variantes según estado Filter Chip
Nombre
Descripción / Uso
Ejemplo
Default
Estado por defecto del elemento
Active
Onclick si tiene arrow
Selected
Filtro aplicado
Default highlight
Estado por defecto de un filtro destacado
Selected highlight
Filtro destacado aplicado
Disabled
Filtro inactivo
Selected disabled
Filtro aplicado inactivo
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Dentro de la configuración de este componente encontramos varias opciones:
Highlight
El estado destacado, permite resaltar un filtro en particular para que sobresalga del resto, facilitando su visualización y gestión.
Icon
Por defecto, el icono está activo para ilustrar el filtro aplicado, aunque esta opción se puede desactivar según las necesidades.
Arrow
Por defecto, la flecha está visible. Sin embargo, si el filtro no despliega opciones adicionales dentro de la categoría, la flecha se oculta.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes