Botão

Nasceu do que os componentes precisavam por dentro — o "Desfazer" do toast, o "Aplicar" do calendário. Em vez de cada um inventar o seu, sai tudo daqui, e fica disponível para o seu projeto. É só classe: um <button> continua sendo um <button>.

Exemplos

Variante, tamanho e estado são classes e atributos que se combinam.

Como usar

tuc-btn e uma variante. Sem variante o botão fica transparente, sem borda — a base de que as variantes partem.

<button type="submit" class="tuc-btn is-primary">Salvar</button>
<button type="button" class="tuc-btn is-outline is-sm">Cancelar</button>
<button type="button" class="tuc-btn is-ghost is-icon" aria-label="Fechar">
  <svg>...</svg>
</button>
<a class="tuc-btn is-link" href="/help/">Saiba mais</a>

No formulário do Django

O botão é do template, não do form. Com type="submit" ele envia o formulário como sempre.

<form method="post">
  {% csrf_token %}
  {{ form }}
  <a class="tuc-btn is-outline" href="{% url 'customers' %}">Cancelar</a>
  <button type="submit" class="tuc-btn is-primary">Salvar</button>
</form>

Em JavaScript

Não há componente para instanciar. O que se faz em código é trocar o estado — por exemplo, ocupado durante um envio:

const btn = document.querySelector('#save');
btn.setAttribute('aria-busy', 'true');
btn.disabled = true;               // impede o segundo clique
btn.prepend(Object.assign(document.createElement('span'), { className: 'tuc-spinner' }));

// ...quando terminar
btn.removeAttribute('aria-busy');
btn.disabled = false;
btn.querySelector('.tuc-spinner').remove();

Variantes e quando usar

Uma ação principal por área. As outras recuam em peso visual, e a destrutiva se distingue pela cor.

Ocupado e desativado

Os dois impedem a ação, mas dizem coisas diferentes, e por isso têm desenhos diferentes.

<button class="tuc-btn is-primary" aria-busy="true" disabled>
  <span class="tuc-spinner"></span> Salvando
</button>

<button class="tuc-btn is-outline" aria-disabled="true">Exportar</button>

Desativado também não reage ao hover — mudar de cor sugeriria que ainda funciona — e perde a sombra. Ao pressionar, o botão encolhe de leve: num toque, sem hover, a cor sozinha não confirma que o dedo acertou o alvo. Com prefers-reduced-motion esse movimento sai.

Teclado e acessibilidade

É o <button> do navegador: foco, Enter e Espaço vêm de graça. O que cabe ao template é escolher o elemento certo e dar nome ao que não tem texto.

• is-icon sem texto precisa de aria-label; o <svg> leva aria-hidden="true".
• <a> para navegar, <button> para agir — o leitor de tela anuncia um e outro de jeitos diferentes.
• Dentro de <form>, dê type="button" ao que não envia: o padrão do navegador é submit.

Classes

Só CSS, sem JavaScript. Não escreva um segundo desenho de botão: ação dentro de tabela ou de bloco de código também é .tuc-btn, com classe própria só para posicionar.