Badge
Componente para exibir rótulos, status, categorias e contadores de forma compacta e destacada.
Variantes
Cada variante tem um propósito semântico diferente no design system.
Default
Usa a cor primária do sistema (verde #5FC318). Para ações principais, status de aprovação e marcadores de destaque.
Secondary
Fundo neutro (section). Para categorias, tags e labels de baixo contraste.
Destructive
Vermelho semântico. Para erros, alertas críticos e remoção.
Outline
Apenas borda. Para tags neutras que não competem com o conteúdo principal.
Ghost
Sem fundo visível em repouso. Para labels discretas em tabelas e listas.
Link
Texto com underline no hover. Para badges que também funcionam como navegação.
Com ícones
O Badge aceita ícones Lucide antes ou depois do texto.
Badge com ícone
import { CheckIcon } from "lucide-react"
<Badge variant="default">
<CheckIcon />
Aprovado
</Badge>Padrão de implementação
Snippets dos usos mais comuns do Badge no projeto.
Badge de status
<Badge variant="default">Ativo</Badge>
<Badge variant="destructive">Inativo</Badge>
<Badge variant="secondary">Rascunho</Badge>Badge como link (render prop)
import Link from "next/link"
<Badge variant="link" render={<Link href="/categorias/marketing" />}>
Marketing
</Badge>Badge em tabela de dados
<td>
<Badge variant={status === "ativo" ? "default" : "outline"}>
{status}
</Badge>
</td>Props e uso
API do Badge disponível no projeto.
Props principais
variant
"default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
Define o estilo visual e semântico do badge.
render
ReactElement
Substitui o elemento raiz. Use render={<Link href='...' />} para badges navegáveis.
className
string
Classes Tailwind adicionais para customizar o estilo no contexto.
Acessibilidade
O Badge renderiza como <span> por padrão, sem papel semântico adicional. Para badges interativos use render com <button> ou <a>.
Para badges que indicam status, considere adicionar aria-label com o contexto completo, especialmente quando o texto do badge for abreviado.
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter