Botões.

Ações primárias, secundárias e promocionais para jornadas de conversão, navegação e respostas rápidas em superfícies editoriais e de produto.

Classes

Classes públicas disponíveis em `@carvalhorafael/proenem-css/ui`.

ClasseTipoUso
pen-buttonComponente

Classe base para ações em formato de pílula com borda e sombra da marca.

pen-button--primaryVariante

Ação principal com fundo vermelho e texto claro.

pen-button--secondaryVariante

Ação secundária com superfície clara e texto escuro.

pen-button--accentVariante

Ação de destaque com fundo rosa para CTAs promocionais.

pen-button--cta-freeVariante

CTA com selo interno para indicar gratuidade ou benefício curto.

pen-button--mdTamanho

Tamanho padrão.

pen-button--lgTamanho

Tamanho grande para áreas de maior hierarquia.

pen-button__badgeElemento

Selo interno usado pela variante promocional.

pen-button__arrowElemento

Ícone textual de seta à direita, controlado por `withArrow` no React.

Variantes

Use a variante para comunicar hierarquia e intenção da ação.

<button class="pen-button pen-button--primary pen-button--md">Primário</button>
<button class="pen-button pen-button--secondary pen-button--md">Secundário</button>
<button class="pen-button pen-button--accent pen-button--md">Destaque</button>
<button class="pen-button pen-button--cta-free pen-button--md">
  Comece agora!
  <span class="pen-button__badge">É GRATUITO</span>
</button>

Tamanhos

`md` é o padrão. Use `lg` quando o botão for a ação principal de uma área.

<button class="pen-button pen-button--primary pen-button--md">Médio</button>
<button class="pen-button pen-button--primary pen-button--lg">Grande</button>

Com seta

Use seta para ações que levam a uma próxima etapa ou navegação.

<button class="pen-button pen-button--primary pen-button--md">
  Continuar
  <span class="pen-button__arrow" aria-hidden="true">→</span>
</button>

Com ícone

Ícones podem entrar antes do texto quando ajudam a reconhecer a ação.

<button class="pen-button pen-button--secondary pen-button--md">
  <svg aria-hidden="true">...</svg>
  Buscar
</button>

Como link

Use `<a>` quando a ação navega para outra URL; preserve `role` nativo de link.

Abrir página
<a class="pen-button pen-button--primary pen-button--md" href="/exemplo">Abrir página</a>

Desabilitado

Use `disabled` em `<button>` ou `aria-disabled="true"` em links não interativos.

Em breve
<button class="pen-button pen-button--primary pen-button--md" disabled>
  Indisponível
</button>
<a class="pen-button pen-button--secondary pen-button--md" aria-disabled="true" tabindex="-1">
  Em breve
</a>