# Badge

> Componentes / Estado e aviso · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

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`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Badge](https://phorte-design-system.vercel.app/styleguide/peca/Badge)
- Ficha no Storybook: [components-base-badge](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-badge--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Badge/0](https://phorte-design-system.vercel.app/previa/Badge/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { Badge } from '@/app/components/atoms/Badge';

<Badge>…</Badge>
```

## Uso

### Variantes na ficha

1. [Interativo](https://phorte-design-system.vercel.app/previa/Badge/0)
2. [Variantes](https://phorte-design-system.vercel.app/previa/Badge/1)
3. [Com ícone](https://phorte-design-system.vercel.app/previa/Badge/2)

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

### 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.

### 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.

### 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

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

| Estado | O que muda |
| --- | --- |
| Padrão | `default`: fundo `--primary`, texto branco. |
| Variantes de estado | `secondary`, `success`, `warning`, `info` e `destructive`: fundo do token e o texto de contraste dele. |
| Contorno | `outline`: sem fundo, borda `--border` e texto `--foreground`. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Hover ou clique | Nada — é estático de propósito. |
| Atributos passados | Vão para o `<span>`; a `className` se mescla às classes da variante. |

### Relacionados

- [Tag](https://phorte-design-system.vercel.app/styleguide/md/Tag.md) — Categoria ou marcação da oferta — a regra está na nota do Badge.
- [Alert](https://phorte-design-system.vercel.app/styleguide/md/Alert.md) — Mensagem com frase inteira.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'info' \| 'outline'` | `'default'` | não | Variante do `cva`. |
| `icone` | `React.ReactNode` | — | não | Ícone de estado (E64), decorativo: visto no sucesso, X no erro. Cumpre o "cor + ícone" da convenção sem cada consumidor montar o seu. O sentido continua no texto — o ícone vai com `aria-hidden`. |

Aceita também: `React.HTMLAttributes<HTMLSpanElement>`.

### Medidas

| Parte | Valor | Classe |
| --- | --- | --- |
| Preenchimento | 10px × 2px | `px-2.5 py-0.5` |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--destructive` | #BA0517 | `bg-destructive` |
| `--destructive-foreground` | #FFFFFF | `text-destructive-foreground` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--info` | #1D345E | `bg-info` |
| `--info-foreground` | #FFFFFF | `text-info-foreground` |
| `--primary` | #D42B2B | `bg-primary` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |
| `--secondary` | #0B8434 | `bg-secondary` |
| `--secondary-foreground` | #FFFFFF | `text-secondary-foreground` |
| `--success` | #2E844A | `bg-success` |
| `--success-foreground` | #FFFFFF | `text-success-foreground` |
| `--warning` | #DD7A01 | `bg-warning` |
| `--warning-foreground` | #1A1A1A | `text-warning-foreground` |

## Acessibilidade

### Leitor de tela

- É um `<span>` de texto: o leitor lê o conteúdo, sem papel nem estado.
- Se o selo for a única indicação do estado numa linha, garanta que o texto dele diga o estado por inteiro.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/atoms/Badge.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-badge--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `6ecd5a3` 2026-09-29 — E130: MarketingHero — estrutura e layout refeitos
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/atoms/Badge.tsx