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.
Chip
| Name | Type | Default | Description |
|---|---|---|---|
text* | string | Text to be displayed on chip. | |
icon | React.ReactNode | SVG icon to be displayed on chip. | |
removable | boolean | Informs whether the close icon should be displayed. |
Chip.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |