Badge

3.1.2

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;

Anatomía del componente

El componente se compone de texto estilizado que utiliza nuestros tokens, y un background que puede variar de color de acuerdo a la necesidad.

Guidelines

Usamos este componente para ayudar a la persona usuaria a identificar cantidades de ítems pendientes que requieren una acción.

Estados posibles

El componente Badge posee 5 estados posibles, pudiendo ser usados de acuerdo con la urgencia de la comunicación y la cantidad de ítems.

Neutral

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.

Primary

Esta variante se utiliza cuando tenemos un contexto neutral, relacionado al número informado en el Badge. El destaque en este caso es esencial.

Success

Esta variante se utiliza cuando tenemos un contexto positivo, relacionado al número informado en el Badge.

Warning

Esta variante se utiliza cuando tenemos un contexto intermedio, relacionado al número informado en el Badge.

Danger

Esta variante se utiliza cuando tenemos un contexto negativo, relacionado al número informado en el Badge.

Recomendaciones de uso

Destacar ítems pendientes
Destacar cantidad de ítems

Componentes relacionados

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.

Implementación

Instalá eñ componente via terminal.

npm install @nimbus-ds/badge

Props

Additional props are passed to the <Badge> element. See div docs for a list of props accepted by the <Badge> element.

Badge

Name	Type	Default	Description
appearance	'danger' 'neutral' 'primary' 'success' 'warning'	'neutral'	Change the visual style of the badge.
count*	'string' 'number'		Total items to be displayed without badge
theme	'light' 'surface'	'surface'	Change the color scheme of the badge.

Badge.Skeleton

Name	Type	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.