Badge
Etiqueta pequena em formato pill para status e destaques (ex.: Beta, Novo). Variantes secondary (padrão), default, outline, destructive e success.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Variantes
BetaNovoCPAExpirado Aprovado
import { Badge } from "@t2-educacao/midas";Uso
<Badge>Beta</Badge>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | "secondary" | "default" | "outline" | "destructive" | "success" | "secondary" | Estilo visual |
asChild | boolean | false | Renderiza o filho (ex.: link) com o visual de badge |
Variantes
| Variante | Quando usar |
|---|---|
secondary | Etiquetas neutras ("Beta", "Rascunho") |
default | Destaque na cor da T2 ("Novo") |
outline | Filtros e categorias |
destructive | Erro, expirado, cancelado |
success | Concluído, aprovado, ativo |
Exemplos
<Badge variant="success"><CheckCircle /> Aprovado</Badge>
<Badge asChild variant="outline">
<a href="/cursos?categoria=cpa">CPA</a>
</Badge>No label de um campo, o badge vai para a direita automaticamente:
<FieldLabel htmlFor="webhook">
Webhook <Badge>Beta</Badge>
</FieldLabel>Acessibilidade
- Não dependa só da cor: o texto do badge precisa dizer o status.
Não faça
- Usar badge como botão. Para ações, use Button.
Avatar
Foto de perfil redonda com fallback (iniciais). Tamanhos sm (24px), default (32px) e lg (40px); AvatarBadge de status ou ícone; AvatarGroup sobreposto com AvatarGroupCount (+3).
Button
Botão de ação. Variantes default, outline, secondary, ghost, destructive e link; tamanhos xs, sm, default e lg; tamanhos de ícone; formato arredondado; estado loading; asChild para links.