Pular para o conteúdo
Faculdade PhorteDesign System

Badge

Em andamento

Rótulo estático e curto de estado ou categoria — "Novo", "Esgotado", "Aprovado" —, em sete cores. Não é clicável, não tem hover e não recebe foco.

Função
Estado e aviso
Também chamado de
selo, rótulo, etiqueta de estado, badge, pílula
Mora em
app/components/atoms/Badge.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Interativo, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Interativo
  2. Variantes
  3. Com ícone

Quando usar

Para marcar o estado ou a categoria de um item, ao lado do título dele — num cartão, numa linha de tabela.

Faça

  • Escreva uma ou duas palavras.
  • Use a cor que o estado já tem no sistema: success para concluído, warning para prazo, destructive para erro.
  • Deixe o texto dizer o estado — a cor acompanha, não substitui.
  • Ponha o ícone de estado com icone (E64): visto no sucesso, X no erro. Vai com aria-hidden, e sempre à esquerda do texto, em todas as variantes (E123).

Evite

  • Embrulhar o Badge num link: ele não tem foco nem alvo de 44px. Ação vai no Button.
  • Usar a cor como única informação ("verde" sem texto).
  • Frase longa dentro do selo.

Quando não usar. Para destacar uma chamada de campanha em caixa alta ("Matrículas abertas", "Ao vivo agora"), use a Tag. Para uma mensagem com frase inteira, o Alert. Para algo clicável, o Button.

Nota de uso

Badge ou Tag (E64, decisão com padrão: as duas continuam peças separadas): o Badge diz o estado do objeto — "Inscrição confirmada", "Pagamento pendente" —, em caixa normal, ao lado do título. A Tag marca a oferta — a categoria, "Mais procurado", "Lista de espera", "Ao vivo" —, em caixa alta, por cima do cartão. Na dúvida: se muda quando a pessoa age, é Badge; se é o que se anuncia, é Tag. Com icone, o estado leva cor e ícone. É estático: sem hover e sem foco. Hover escurecendo um rótulo promete clique, e o consumidor acaba embrulhando o Badge num link sem nome nem alvo de 44px. Ação vai no Button.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Selo — Caixa com cantos `rounded-md`, `px-2.5 py-0.5`.
  2. Texto — `text-xs` em seminegrito.
  3. Ícone — Opcional (`icone`), 14px, decorativo, antes ou depois do texto (E64).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Padrãodefault: fundo --primary, texto branco.
Variantes de estadosecondary, success, warning, info e destructive: fundo do token e o texto de contraste dele.
Contornooutline: sem fundo, borda --border e texto --foreground.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Hover ou cliqueNada — é estático de propósito.
Atributos passadosVão para o <span>; a className se mescla às classes da variante.

Relacionados