Badge

Apresentação

O componente Badge é responsável por exibir pequenas etiquetas ou marcadores na interface, geralmente usados para destacar informações importantes, status ou contadores. É um componente versátil que pode ser usado em diversos contextos da interface.

Quando usar

• Para exibir contadores (notificações, mensagens não lidas)
• Para mostrar status de itens
• Para destacar informações importantes
• Para marcar itens como novos ou atualizados
• Para exibir tags ou categorias

Forma básica de uso

import { Badge } from 'eitri-luminus';

// Badge básico com texto
<Badge>Novo</Badge>

// Badge com contador
<Badge>5</Badge>

// Badge com classes personalizadas
<Badge className="badge-primary">Importante</Badge>

// Badge com componente filho
<Badge>
  <span className="text-sm">Status</span>
</Badge>

Propriedades

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o badge
id	string	Identificador único do componente

Heranças

O componente Badge herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente pode receber tanto texto simples quanto componentes React como filhos
• Por padrão, o componente usa a classe 'badge' que define o estilo base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se usar cores e estilos consistentes com o design system
• O componente é ideal para informações curtas e concisas