Botões

buttons é um tipo avançado suportado pelo editor, API e Build Kit. Ele substitui o contrato visual de botões de toda a loja, não apenas uma classe ou botão isolado.

Não há aba de schema. Em API e Build Kit, envie { "component_config": {} }. O único arquivo é o SCSS principal.

Referência-base completa

Este é o contrato-base completo para um botão compartilhado. Adapte cores, fontes, espaçamentos e transições à referência aprovada da loja, sem remover %button-default ou seus estados.

%button-default {
  align-items: center;
  appearance: none;
  background: var(--button-background, #03060b);
  border: 1px solid var(--button-border, #03060b);
  border-radius: var(--button-radius, 0);
  color: var(--button-color, #ffffff);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: .75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;

  &:hover { background: var(--button-background-hover, #30343b); }
  &:focus-visible { outline: 2px solid var(--button-focus, #2365d8); outline-offset: 2px; }
  &:disabled, &.-unavailable { cursor: not-allowed; opacity: .5; }
  &.-adding, &.-sending, &.-searching { cursor: wait; pointer-events: none; }
}

.button-default { @extend %button-default; }

Verificação

• Compare a implementação final à referência aprovada para a loja.
• Teste normal, hover, foco, .-adding, .-sending, .-searching, .-unavailable e disabled.
• Confira compra, formulários, busca, conta, filtros e demais telas que utilizam .button-default.

Não use este tipo para alterar somente .btn-primary ou um botão de uma seção.