Badge
El componente Badge se utiliza para comunicar cantidad de ítems o acciones pendientes.
import React from "react";
import { Badge } from "@nimbus-ds/components";
const Example: React.FC = () => <Badge count="+99" theme="light" />;
export default Example;El componente se compone de texto estilizado que utiliza nuestros tokens, y un background que puede variar de color de acuerdo a la necesidad.
Usamos este componente para ayudar a la persona usuaria a identificar cantidades de ítems pendientes que requieren una acción.
El componente Badge posee 5 estados posibles, pudiendo ser usados de acuerdo con la urgencia de la comunicación y la cantidad de ítems.
Esta variante se utiliza cuando tenemos un contexto neutral, relacionado al número informado en el Badge. El destaque en este caso no es esencial.
Esta variante se utiliza cuando tenemos un contexto neutral, relacionado al número informado en el Badge. El destaque en este caso es esencial.
Esta variante se utiliza cuando tenemos un contexto positivo, relacionado al número informado en el Badge.
Esta variante se utiliza cuando tenemos un contexto intermedio, relacionado al número informado en el Badge.
Esta variante se utiliza cuando tenemos un contexto negativo, relacionado al número informado en el Badge.
- Destacar ítems pendientes
- Destacar cantidad de ítems
- Tag - Usado para categorizar información, organizar o indicar el estado de un elemento o componente usando palabras clave, iconos y colores.
- Chip - Usado para categorizar datos dentro de un filtro o resultado de búsqueda.
Instalá eñ componente via terminal.
npm install @nimbus-ds/badgeAdditional props are passed to the <Badge> element. See div docs for a list of props accepted by the <Badge> element.