# Tag

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

Etiqueta curta em caixa alta que marca a oferta — a categoria do curso, "Mais procurado", "Lista de espera", "Ao vivo agora". A variante `live` traz um ponto que pulsa. Desde a E64 é também a pílula do CourseCard, com ícone e largura máxima.

- Função: Estado e aviso
- Também chamado de: etiqueta, chamada, ao vivo, tag
- Mora em: `app/components/atoms/Tag.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Tag](https://phorte-design-system.vercel.app/styleguide/peca/Tag)
- Ficha no Storybook: [components-base-tag](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-tag--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Tag/0](https://phorte-design-system.vercel.app/previa/Tag/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 { Tag } from '@/app/components/atoms/Tag';

<Tag>…</Tag>
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/Tag/0)
2. [Variantes](https://phorte-design-system.vercel.app/previa/Tag/1)
3. [Ao Vivo](https://phorte-design-system.vercel.app/previa/Tag/2)
4. [Texto Longo](https://phorte-design-system.vercel.app/previa/Tag/3)
5. [No cartão de curso](https://phorte-design-system.vercel.app/previa/Tag/4)
6. [Com largura máxima](https://phorte-design-system.vercel.app/previa/Tag/5)

Em cima de cartões e destaques, para uma chamada de uma a três palavras — principalmente o estado de um evento.

### Quando não usar

Para estado ou categoria discretos ao lado de um título, use o Badge. Para mensagem com frase, o Alert.

### Faça

- Use `live` só no que está acontecendo agora.
- Use `closed` no que acabou (evento, inscrição).
- Escreva o texto em caixa normal: a caixa alta vem do estilo.
- Use `vidro` sobre foto, `neutro` para dado do curso (modalidade, carga horária), `destaque`, `aviso` e `indisponivel` para a situação da oferta (E64).
- Com `larguraMaxima`, o texto longo corta com reticências e o `title` guarda o inteiro.

### Evite

- Tag clicável: não tem foco nem alvo.
- Refazer a pílula à mão num cartão: era o que o CourseCard fazia, com quatro raios e alturas diferentes.
- Várias tags `live` na mesma tela — o ponto pulsante perde o sentido.

### Anatomia

1. **Ponto** — Só no `live`: 6px, claro, pulsando só com movimento liberado.
2. **Texto** — 12px (`text-rotulo`) em negrito, caixa alta, espaçamento largo, centrado pela caixa de 20px em todas as variantes, inclusive a de contorno (E125).
3. **Ícone** — Opcional (`icone`), 12px, decorativo, antes do texto (E64).

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | `default`: fundo `--primary`, texto branco. |
| Vidro, destaque, aviso, indisponível, neutro | As pílulas do CourseCard (E64): `bg-vidro` sobre foto; `--secondary`; `--warning`; `--destructive`; `--muted` sem sombra. |
| Ao vivo | `live`: fundo `--destructive`, sombra avermelhada e o ponto que pulsa (`motion-safe:animate-pulse`). |
| Encerrado | `closed`: fundo `--muted-foreground`, texto `--card`. |
| Contorno | `outline`: sem fundo, com borda. |
| Movimento reduzido | O ponto do `live` para de pulsar. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Qualquer variante | Estática: sem hover, sem foco. |
| Texto maior que `larguraMaxima` | Corta com reticências; o `title` recebe o texto inteiro — conferido no teste da ficha. |

### Relacionados

- [Badge](https://phorte-design-system.vercel.app/styleguide/md/Badge.md) — Estado do objeto (inscrição, pagamento) — a regra está na nota do Badge.
- [CourseCard](https://phorte-design-system.vercel.app/styleguide/md/CourseCard.md) — O cartão que usa as pílulas de categoria, situação e dado do curso.
- [EventCard](https://phorte-design-system.vercel.app/styleguide/md/EventCard.md) — O cartão de evento que usa o estado ao vivo e encerrado.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `variant` | `'default' \| 'live' \| 'closed' \| 'outline' \| 'vidro' \| 'destaque' \| 'aviso' \| 'indisponivel' \| 'neutro'` | `'default'` | não | Variante do `cva`. |
| `icone` | `React.ReactNode` | — | não | Ícone decorativo antes do texto (E64), com `aria-hidden`. |
| `larguraMaxima` | `string` | — | não | Largura máxima (E64), em qualquer medida CSS: "12rem". Acima dela o texto corta com reticências, e o `title` guarda o texto inteiro. |

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

### Medidas

| Parte | Valor | Classe |
| --- | --- | --- |
| Ponto do `live` | 6px | `size-1.5` |
| Altura da etiqueta | 20px, fixa | `h-5 leading-none` |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card`, `text-card` |
| `--destructive` | #BA0517 | `bg-destructive`, `shadow-destructive/50` |
| `--destructive-foreground` | #FFFFFF | `bg-destructive-foreground`, `text-destructive-foreground` |
| `--muted-foreground` | #595959 | `bg-muted-foreground`, `text-muted-foreground` |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--primary` | #D42B2B | `bg-primary` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |
| `--secondary` | #0B8434 | `bg-secondary` |
| `--secondary-foreground` | #FFFFFF | `text-secondary-foreground` |
| `--warning` | #DD7A01 | `bg-warning` |
| `--warning-foreground` | #1A1A1A | `text-warning-foreground` |

## Acessibilidade

### Leitor de tela

- O ponto é `aria-hidden`: o estado "ao vivo" tem de estar no texto.
- O ícone também é `aria-hidden`; o leitor lê o texto inteiro mesmo cortado na tela.

### 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/Tag.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-tag--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/Tag.tsx