Chip
El componente Chip es utilizado para señalizar criterios o atributos relacionados a búsquedas o filtros de una lista de datos.
import React from "react";
import { Chip } from "@nimbus-ds/components";
import { BoxPackedIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Chip icon={<BoxPackedIcon size={12} />} text="Text" />
);
export default Example;El componente se compone de un texto estilizado que utiliza nuestros tokens, y dos iconos opcionales que pueden ser utilizados en conjunto.
El componente Chip puede ser usado de 2 formas diferentes, pudiendo ser alternadas de acuerdo con la necesidad.
- Non removable - Usamos esta opción cuando no es necesario quitar el criterio o filtro.
- Removable - Utilizamos esta opción cuando es necesario quitar el criterio o filtro.
El uso de un icono es opcional y debería estar directamente relacionado al criterio o contexto que el componente está seleccionando, facilitando así el entendimiento del término de búsqueda o filtro.
El icono de cerrar debe estar visible siempre que fuera posible anular los criterios del filtro o búsqueda.
El texto del componente debe explicar claramente la información que representa en pocas palabras. A pesar de ser interactivo, no describe una acción y por lo tanto no debe ser un verbo.
- Exhibir uno o más criterios de un filtro
- Quitar criterios de un filtro
- Tag - Es usado para categorizar información, organizar o indicar el estado de elementos o componentes usando palabras clave, iconos y colores.
- Badge - Es usado para comunicar cantidad de ítems o acciones pendientes.
Instalá el componente via terminal.
npm install @nimbus-ds/chipAdditional props are passed to the <Chip> element. See button docs for a list of props accepted by the <Chip> element.