Pular para o conteúdo principal

Badge

O Badge é um componente visual usado para exibir notificações, contadores ou rótulos informativos de forma destacada. Ele pode mostrar números (com limite de 99+) ou texto curto.

Importação​

import { Badge } from '@useblu/ocean-react';

Importação específica (recomendado para tree-shaking)​

import { Badge } from '@useblu/ocean-react/Badge';

Importação de tipos TypeScript​

import type { BadgeProps } from '@useblu/ocean-react';

// Uso em componente customizado
const MyComponent: React.FC<BadgeProps> = (props) => {
  return <Badge {...props} />;
};

Playground Interativo​

Explore o componente Badge no playground interativo do Storybook:

🚀 Abrir no Storybook

Documentação Completa​

Para documentação técnica detalhada, exemplos de uso e API completa, consulte o Storybook do Badge.

No Storybook você encontrará:

  • ✅ Controles interativos para testar todas as props
  • ✅ API gerada automaticamente com tipagem completa
  • ✅ Exemplos visuais de todas as variantes e estados
  • ✅ Playground para experimentação rápida

Uso básico​

Com contador​

<Badge count={5} color="brand" />

Com texto​

<Badge color="brand">Novo</Badge>

Tiny (apenas indicador)​

<Badge variation="tiny" color="brand" />

Variações de tamanho​

O Badge oferece três tamanhos diferentes:

Tiny​

Exibe apenas um pequeno indicador visual, sem texto ou números.

<Badge variation="tiny" color="brand" />

Small (padrão)​

Tamanho padrão, adequado para a maioria dos casos de uso.

<Badge variation="small" count={5} color="brand" />

Medium​

Maior e mais visível, ideal para contadores importantes.

<Badge variation="medium" count={99} color="brand" />

Cores disponíveis​

Veja todas as cores do Badge em ação:

🚀 Abrir no Storybook

Guia de uso das cores​

  • brand: Para notificações principais e contadores importantes
  • complementary: Para informações secundárias ou categorias
  • alert: Para avisos, erros ou ações urgentes
  • neutral: Para informações gerais ou estados neutros
  • highlight: Para destacar novidades ou itens importantes

Comportamentos especiais​

Contador com limite​

O Badge automaticamente exibe "99+" quando o contador excede 99:

🚀 Abrir no Storybook

Variação Tiny​

A variação tiny mostra apenas um pequeno indicador, ignorando texto ou contador:

🚀 Abrir no Storybook

API​

Props​

PropTipoPadrãoDescrição
variation'tiny' | 'small' | 'medium''small'Define o tamanho do badge
color'brand' | 'complementary' | 'alert' | 'neutral' | 'highlight'-Define a cor do badge
countnumber-Número a ser exibido (máximo 99+)
childrenReactNode-Texto do badge (usado quando count não está definido)
classNamestring-Classes CSS adicionais

Comportamento das props​

  • Se count for definido, o Badge exibirá o número
  • Se count não for definido e children estiver presente, exibirá o texto
  • Se variation for 'tiny', apenas o indicador visual será mostrado
  • Contadores acima de 99 são automaticamente truncados para "99+"

Acessibilidade​

  • ✅ Atributo role="tag" para identificação semântica
  • ✅ Contraste adequado em todas as variações de cor
  • ✅ Tamanhos adequados para visualização
  • ✅ Suporte a screen readers

Melhores práticas​

✅ Faça​

  • Use cores semanticamente apropriadas (alert para erros, brand para principais)
  • Mantenha textos curtos e descritivos
  • Use tiny para indicadores discretos
  • Use medium para contadores importantes que precisam chamar atenção

❌ Não faça​

  • Não use textos muito longos em badges
  • Não misture diferentes cores sem propósito semântico
  • Não use badges como únicos indicadores de informações críticas
  • Não ignore a hierarquia visual ao escolher tamanhos

CSS Classes​

O componente gera as seguintes classes CSS:

ClasseDescrição
.ods-badgeClasse base aplicada a todos os badges
.ods-badge--tinyModificador para variação tiny
.ods-badge--smallModificador para variação small
.ods-badge--mediumModificador para variação medium
.ods-badge--brandModificador para cor brand
.ods-badge--complementaryModificador para cor complementary
.ods-badge--alertModificador para cor alert
.ods-badge--neutralModificador para cor neutral
.ods-badge--overflowAplicado quando count > 9 para ajustar layout
.ods-badge__contentContainer do conteúdo interno
.ods-badge__countAplicado especificamente ao conteúdo numérico
.ods-badge__textAplicado especificamente ao conteúdo textual

Exemplos de uso​

Notificação de mensagens​

<div>
  <span>Mensagens</span>
  <Badge count={3} color="brand" />
</div>

Status de produto​

<div>
  <span>Produto</span>
  <Badge color="complementary">Novo</Badge>
</div>

Indicador de erro​

<div>
  <span>Formulário</span>
  <Badge count={2} color="alert" />
  <span>erros</span>
</div>

Visão geral das variações​

Veja todas as variações do Badge em ação:

🚀 Abrir no Storybook
  • Button - Para ações com badges de notificação
  • Alert - Para mensagens de feedback mais detalhadas
  • Storybook - Badge - Documentação técnica