Badge

Componente para exibir labels, status e indicadores visuais compactos. Possui variantes semânticas que se adaptam automaticamente ao dark mode.

import { Badge } from "@workspace/ui/components/badge";

<Badge variant="default">Ativo</Badge>
<Badge variant="success">Pago</Badge>
<Badge variant="warning">Pendente</Badge>

Variantes

Todas as variantes disponíveis do componente Badge.

DefaultBrandSecondaryOutlineDestructiveSuccessWarningInfo

Status de Pedidos

Uso prático para status de pedidos no Command Center e portais.

PagoPendenteCanceladoEnviadoRascunho

Status de Consultoras

Badges para identificar planos e status no sistema.

StartPlusMasterEmbaixadoraAtivaPré-cadastroInativa

Tags de Entrega e Canal

Badges para tipos de entrega e canais de venda.

Entrega LocalFullPDV SelfCatálogoPlan Kit

Guia de Uso por Variante

Quando usar cada variante do Badge.

DefaultDestaque principal, planos, tags importantes

BrandElementos de marca, Embaixadora, promoções

SecondaryTags neutras, rascunhos, metadados

OutlineCanais de venda, categorias, filtros

DestructiveCancelado, erro, inativo, excluído

SuccessPago, ativo, entrega local, confirmado

WarningPendente, aguardando, pré-cadastro

InfoEnviado, informação, Full

Como usar

{/* Variantes semânticas (recomendado) */}
<Badge variant="success">Pago</Badge>
<Badge variant="warning">Pendente</Badge>
<Badge variant="destructive">Cancelado</Badge>
<Badge variant="info">Enviado</Badge>

{/* Brand e outline */}
<Badge variant="brand">Embaixadora</Badge>
<Badge variant="outline">PDV Self</Badge>

{/* Custom com className (evitar se possível) */}
<Badge className="bg-chart-5 text-white">Custom</Badge>

API Reference

Prop	Type	Default	Descrição
`variant`	`"default" \| "brand" \| "secondary" \| "outline" \| "destructive" \| "success" \| "warning" \| "info"`	"default"	Estilo visual do badge
`asChild`	`boolean`	false	Renderiza como filho (Slot) ao invés de span