Badge
Comunica la cantidad de ítems pendientes o el estado de un elemento mediante un contador breve resaltado por color.
- Señalar la cantidad de ítems pendientes que requieren una acción: mensajes sin leer, pedidos por procesar, pagos rechazados.
- Reflejar el estado de un elemento mediante color cuando el dato es un número o un valor muy corto (por ejemplo, +99).
- Acompañar un ítem de menú o icon button para anticipar que hay algo nuevo o pendiente.
- Categorizar o etiquetar: clasificar con palabras clave, íconos o varias categorías. En su lugar, usar Tag.
- Representar filtros removibles: mostrar filtros aplicados o resultados de búsqueda que la persona puede quitar. En su lugar, usar Chip.
- Comunicar un mensaje accionable: transmitir un aviso extenso o que necesita contexto. En su lugar, usar Toast.
Como contador (type="text") muestra un número sobre la superficie; como punto (type="dot") prescinde del contador.
+99
Text
Dot
- Surface: fondo con color definido por la apariencia y el tema, que da significado visual al dato.
- Counter: texto breve que indica la cantidad o el valor; admite la abreviación de valores altos (por ejemplo, +99).
+99
Text: muestra el valor de count; para comunicar una cantidad. Valor por defecto.
Dot: indicador de punto sin número; para avisar que hay novedad cuando la cantidad exacta no importa. Con este tipo, count se omite.
+99
Neutral: contexto neutral sin urgencia. Ej.: cantidad de ítems en una lista. Valor por defecto.
+99
Primary: contexto neutral donde el destaque es esencial. Ej.: notificaciones nuevas en el menú.
+99
Success: contexto positivo. Ej.: pedidos completados o pagos aprobados.
+99
Warning: contexto intermedio que pide atención. Ej.: ítems próximos a vencer.
+99
Danger: contexto negativo o urgente. Ej.: pagos rechazados o errores por resolver.
+99
Surface: fondo de color pleno y máximo contraste; para destacar el dato con fuerza. Valor por defecto.
+99
Light: fondo tenue del mismo color; para contextos de menor jerarquía o sobre superficies cargadas.
El Badge acompaña íconos, ítems de menú o encabezados para anticipar pendientes o novedades sin abrir la sección: como contador (type="text") sobre un ítem de menú, o como punto (type="dot") sobre un ícono cuando solo importa avisar que hay algo nuevo.
Tienda online
Chat
3
3
Pagos rechazados
12
Pedidos completados
Elegir la apariencia según el significado del dato (danger para lo crítico, success para lo positivo).
8
Productos en catálogo
Evitar la apariencia danger para información neutral o sin urgencia.
+99
Mensajes sin leer
Mantener el contador breve y abreviar los valores altos (por ejemplo, +99).
Nuevo
Evitar palabras o texto descriptivo dentro del Badge; para eso usar Tag.
- Significado del contador: asegurar que el número tenga sentido en su contexto; si por sí solo es ambiguo, describir su propósito en el elemento que lo contiene (por ejemplo, mediante aria-label).
- Contraste suficiente: mantener el contraste entre el contador y la superficie del Badge para garantizar la legibilidad (WCAG AA).
Instalá el componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Badge } from "@nimbus-ds/components";
const Example: React.FC = () => <Badge count="+99" theme="light" />;
export default Example;Las propiedades adicionales se pasan al elemento <Badge>. Consultá la documentación del elemento span para ver la lista de atributos aceptados.
Badge
| Name | Type | Default | Description |
|---|---|---|---|
appearance | 'danger' | 'neutral' | Change the visual style of the badge. |
count | 'string' | Total items to be displayed without badge | |
theme | 'light' | 'surface' | Change the color scheme of the badge. |
type | 'dot' | 'text' | Change the badge type between a text counter and a dot indicator. |
Badge.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. | |
className | string | ||
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. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.