Pular para o conteúdo
Faculdade PhorteDesign System

Tag

Em andamento

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
Ú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 Padrão, 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. Padrão
  2. Variantes
  3. Ao Vivo
  4. Texto Longo
  5. No cartão de curso
  6. Com largura máxima

Quando usar

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

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.

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

Anatomia

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

  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

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.
Vidro, destaque, aviso, indisponível, neutroAs pílulas do CourseCard (E64): bg-vidro sobre foto; --secondary; --warning; --destructive; --muted sem sombra.
Ao vivolive: fundo --destructive, sombra avermelhada e o ponto que pulsa (motion-safe:animate-pulse).
Encerradoclosed: fundo --muted-foreground, texto --card.
Contornooutline: sem fundo, com borda.
Movimento reduzidoO ponto do live para de pulsar.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Qualquer varianteEstá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