Button

<link rel="stylesheet" href="css/nash-button.css" />   ← depois de nash-componentes.css
<button class="nash-button" data-emphasis="primary">Criar imagem<span class="nash-button-meta">1 crédito</span></button>
<button class="nash-button">Cancelar</button>
<script src="js/nash-button.js"></script>

const botao = NashButton.mount('#criar', {
  label: 'Criar imagem',                  // o rótulo (.nash-button-label); sem ele, o texto que a página escreveu
  meta: '1 crédito',                      // o meta text (.nash-button-meta), opcional
  size: 'large',                          // data-size: small · medium (padrão) · large
  emphasis: 'primary',                    // data-emphasis: primary · secondary (padrão) · ghost
  toggle: true,                           // o clique alterna aria-pressed e emite nash:toggle
  onToggle(pressed, b) {}
})
botao.setPressed(true)                     // aria-pressed: accent + halo + aura
botao.setBusy(true)                        // aria-busy: o arco de 1,8s; o clique é segurado
botao.complete()                           // o anel acende, segura e apaga em 700ms; emite nash:complete
botao.setLabel('Desconectar')              // escreve o rótulo sem levar a anatomia
botao.setMeta('')                          // tira o meta text
botao.el.addEventListener('nash:toggle', (e) => e.detail)   // { pressed }

// com ícone, antes ou depois do texto; a parte .nash-icon-fill enche ao ligar:
<button class="nash-button" aria-pressed="false"><svg class="nash-icon" viewBox="0 0 24 24">…</svg>Ditar</button>

// variante congelada, pra documentação — não responde ao ponteiro, o arco parado:
<button class="nash-button" data-state="hover" data-emphasis="primary">Criar imagem</button>

// no botão:  data-size="small|medium|large"  · data-emphasis="primary|secondary|ghost"  · data-mode="chat|voz|design|imagem|social"  · aria-pressed · aria-busy · disabled
// tokens:    --nash-button-accent  · --nash-button-arc-a / -b (o par do arco e do anel de pressão)  · --nash-button-height (densidade de tela)  · --nash-button-padding  · --nash-button-radius  · --nash-button-icon-size  · --nash-button-time-scale
// na família:  --nash-motion-scale: 4  (câmera lenta)  · [data-motion="reduced"]

• O nome é do mapa de vocabulário.Os nomes do Figma (Primary Button, label, meta, State) dão a base, não o identificador. A peça é .nash-button (Button, /componentes/53); parte nash-button-<parte> (label, meta, halo, spotlight, sweep, ring — o Button.Ring de /componentes/46); variante data-<eixo> (size, emphasis, mode); estado por ARIA; token --nash-button-<parte>; o que o JS escreve em --nash-runtime-*; evento nash:toggle e nash:complete; método camelCase, verbo primeiro. Os modificadores BEM (--small, --large, --filled) saíram.
• O Figma desenha o large.A referência tem um tamanho só, 200 × 56, e o mapa chama a peça de "pílula de 44px". Os três tamanhos são os dois alvos do kit mais o do Figma: small 32 (--nash-target-dense, barra densa), medium 44 (--nash-target-loose, o padrão, o que todas as telas já usavam) e large 56 (o Figma). O raio 24 do Figma vale nos três: a 32 e a 44 ele é pílula sozinho. Medium e small são pendentes no Figma.
• A ênfase é um eixo, e o cheio saiu.O mapa define data-emphasis="primary|secondary|ghost": hierarquia sem material. primary é o Primary Button do Figma (o arco); secondary, o padrão, é "a mesma placa com o stroke branco" que a descrição do Figma pede pras ações secundárias; ghost é a placa que só aparece sob o ponteiro (era .nash-surface--ghost). O .nash-button--filled — placa cheia no accent — não tem lugar no enum nem no Figma; os quatro Salvar/Baixar das preferências viraram primary.
• O arco é do primário, é âmbar e dá a volta em 5,5s.O Figma o desenha no par #FFB454 › #FF6B2C, com 14% de alfa fora do arco, e anota 4,5s; o kit tinha os mesmos degraus a 5,5s desde 2026-09-04, quando o dono achou os laços rápidos demais. Ficou 5,5 (--nash-motion-loop-arc). O par é --nash-button-arc-a/-b, não o accent: o accent é branco por padrão e troca com o modo; o arco é a marca da ação principal. Uma por tela.
• Ocupado no primário não salta.Trocar a duração de uma animação preserva o tempo decorrido e faz o ângulo pular (o kit contornava pelo playbackRate). Aqui o ângulo do arco é a soma de dois registrados: a volta lenta (--nash-runtime-spin, 5,5s) e a de ocupado (--nash-button-busy-spin, 1,8s), as duas sempre existindo; aria-busy pausa uma e solta a outra, e a soma é contínua nos dois sentidos.
• Pressed é a pressão, e o anel de pressão entrou na peça.Num botão o terceiro estado do Figma dura o clique: :active, 100ms. O clarão (.nash-fx-ring-press) e o concluído (.nash-fx-ring-complete) só tinham este componente como consumidor; efeito de um componente só não é camada (regra 9 do mapa). O anel é a parte .nash-button-ring; a pressão o fecha e sobe, soltar o abre e apaga; complete() o acende em 700. As regras saíram de nash-vidro.css e motion.css; nashMotion.concluido saiu dos dois motion.js.
• A varredura entrou; o lampejo continua nos cartões..nash-fx-sweep é usado por cartões e pela amostra do vidro, então segue camada do kit. Dentro do botão o traço é a parte .nash-button-sweep, com o mesmo desenho e os mesmos 640ms, e o lado de entrada é --nash-runtime-sweep-direction.
• A aura segue a pílula.O Icon Button mascara um degradê radial; num retângulo arredondado a máscara não seguiria o contorno. Aqui a aura é uma sombra do accent num elemento sem fundo: a borda de dentro é o tamanho do elemento (--nash-button-halo-inner) e a de fora é o desfoque (--nash-button-halo-outer). Ligar abre a de fora em 420; desligar move a de dentro em 600 enquanto a opacidade cai — a mesma leitura, comida de dentro pra fora. A respiração é o mesmo número registrado do Icon Button, numa animação que existe parada em repouso.
• Uma classe, e o texto da página vira o rótulo.A composição de sete classes mais dois <i> escritos à mão saiu de todas as telas; a página escreve class="nash-button" e os atributos, e o JS completa aura, luz, varredura, anel e embrulha o texto em .nash-button-label. Quem escrevia textContent no botão levava a varredura e o anel junto; agora a anatomia volta sozinha, e setLabel() é o caminho.
• Estados que o Figma não desenhou.Ligado, ocupado, foco pelo teclado e desabilitado existem porque o botão precisa deles; ficam listados como pendentes no Figma, junto com os tamanhos small e medium e as ênfases secondary e ghost.