Badge
Comunica a quantidade de itens pendentes ou o estado de um elemento por meio de um contador breve destacado por cor.
- Sinalizar a quantidade de itens pendentes que exigem uma ação: mensagens não lidas, pedidos a processar, pagamentos recusados.
- Refletir o estado de um elemento por meio da cor quando o dado é um número ou um valor muito curto (por exemplo, +99).
- Acompanhar um item de menu ou icon button para antecipar que há algo novo ou pendente.
- Categorizar ou rotular: classificar com palavras-chave, ícones ou várias categorias. Em vez disso, usar Tag.
- Representar filtros removíveis: mostrar filtros aplicados ou resultados de busca que a pessoa pode remover. Em vez disso, usar Chip.
- Comunicar uma mensagem acionável: transmitir um aviso extenso ou que precisa de contexto. Em vez disso, usar Toast.
Como contador (type="text") mostra um número sobre a superfície; como ponto (type="dot") dispensa o contador.
+99
Text
Dot
- Surface: fundo com cor definida pela aparência e pelo tema, que dá significado visual ao dado.
- Counter: texto breve que indica a quantidade ou o valor; admite a abreviação de valores altos (por exemplo, +99).
+99
Text: mostra o valor de count; para comunicar uma quantidade. Valor padrão.
Dot: indicador de ponto sem número; para avisar que há novidade quando a quantidade exata não importa. Com este tipo, count é omitido.
+99
Neutral: contexto neutro sem urgência. Ex.: quantidade de itens em uma lista. Valor padrão.
+99
Primary: contexto de destaque, para chamar atenção com força. Ex.: notificações novas no menu.
+99
Success: contexto positivo. Ex.: pedidos concluídos ou pagamentos aprovados.
+99
Warning: contexto intermediário que pede atenção. Ex.: itens próximos do vencimento.
+99
Danger: contexto negativo ou urgente. Ex.: pagamentos recusados ou erros a resolver.
+99
Surface: fundo de cor plena e contraste máximo; para destacar o dado com força. Valor padrão.
+99
Light: fundo suave da mesma cor; para contextos de menor hierarquia ou sobre superfícies carregadas.
O Badge acompanha ícones, itens de menu ou cabeçalhos para antecipar pendências ou novidades sem abrir a seção: como contador (type="text") sobre um item de menu, ou como ponto (type="dot") sobre um ícone quando só importa avisar que há algo novo.
Loja online
Chat
3
3
Pagamentos recusados
12
Pedidos concluídos
Escolher a aparência conforme o significado do dado (danger para o crítico, success para o positivo).
8
Produtos no catálogo
Evitar a aparência danger para informação neutra ou sem urgência.
+99
Mensagens não lidas
Manter o contador breve e abreviar os valores altos (por exemplo, +99).
Novo
Evitar palavras ou texto descritivo dentro do Badge; para isso usar Tag.
- Significado do contador: garantir que o número faça sentido em seu contexto; se por si só for ambíguo, descrever seu propósito no elemento que o contém (por exemplo, por meio de aria-label).
- Contraste suficiente: manter o contraste entre o contador e a superfície do Badge para garantir a legibilidade (WCAG AA).
Instale o 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;As propriedades adicionais são passadas ao elemento <Badge>.
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. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.