Componentes
Badge
betaRotula um estado ou categoria. Carrega significado, não decoração — cada variante quer dizer uma coisa.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/badge
Playground
Ativo
<Badge>Ativo</Badge>Uso
Um rótulo curto de estado ou categoria. Não é botão e não clica.
AtivoRascunho
Variantes de estado
Comunicam resultado: sucesso, atenção e erro. Escolha pelo significado, nunca pela cor que ficou melhor.
ConcluídoPendenteAtrasado
Variantes de marca
As três variantes de marca carregam significado fixo: navy é estrutura, purple é cognição e conteúdo, teal é progresso. Elas existem para que ninguém volte a compor o par subtle/strong por className em cada tela.
EstruturaCogniçãoProgresso
Variantes neutras
SecondaryOutlineGhost
Com ícone
O ícone entra antes do texto e é dimensionado pelo próprio componente.
AprovadoRevisar
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Badge
| Prop | Tipo | Padrão |
|---|---|---|
| variant | "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "warning" | "success" | "navy" | "purple" | "teal" | null | "default" |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css