Componentes
Botão
O botão pesa mais que o campo: texto de 16 px e contorno de 2 px. Hierarquia, não cor por ação.
Quando usar
<button type>para ação- um primário por formulário
Quando não usar
<a>com cara de botão para ação- verde para confirmar
- link "desabilitado"
Hierarquia
<div class="hx-actions">
<button class="hx-button hx-button-primary" type="submit">Publicar versão</button>
<button class="hx-button" type="button">Ver histórico</button>
<button class="hx-button hx-button-danger" type="button">Descartar versão</button>
<a class="hx-button hx-button-link" href="#">Cancelar</a>
</div>Perigo final
claro
escuro
<button class="hx-button hx-button-danger-solid" type="button">Confirmar recusa</button>Estados
claro
escuro
<div class="hx-actions">
<button class="hx-button hx-button-primary" type="submit" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Publicando…</button>
<button class="hx-button" type="button" disabled>Encerrar</button>
<button class="hx-button hx-button-compact" type="button">Compacto</button>
</div>disabled + rótulo no gerúndio. Compacto (36 px) só por linha de tabela e só com ponteiro fino.Com ícone e só ícone
claro
escuro
<div class="hx-actions">
<button class="hx-button hx-button-primary" type="button"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-plus"></use></svg>Nova solicitação</button>
<button class="hx-button" type="button"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-refresh-cw"></use></svg>Tentar de novo</button>
<button class="hx-button hx-button-icon" type="button" aria-label="Buscar"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-search"></use></svg></button>
</div>Enviando, em cada variante
claro
escuro
<div class="hx-actions">
<button class="hx-button hx-button-primary" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Publicando…</button>
<button class="hx-button" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Carregando…</button>
<button class="hx-button hx-button-danger" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Descartando…</button>
<button class="hx-button hx-button-danger-solid" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Recusando…</button>
</div>Por que não há botão verde
A paleta dos botões é a hierarquia — primário, secundário, perigo, perigo final e sair —, não as cores de estado. Verde é "concluído" e âmbar é "atenção" (ADR-0006): um botão verde ao lado de um selo verde diz duas coisas com a mesma cor. Confirmar, aprovar e homologar são primários (ADR-0010). Para ações que andam juntas, veja o grupo de botões.
Anatomia
- rótulo — verbo + objeto ("Criar disponibilidade"); nunca "OK" ou "Enviar" sozinho
- ícone — opcional, reforço, à esquerda
- contorno — 2 px, mais forte que o do campo; ou cheio
Acessibilidade
- o anel de foco é o do sistema (2 px de fundo + 2 px de foco);
- todo
<button>declaratype; - alvo de 44 px; o compacto volta a 44 no toque.
Faça e não faça
Faça
- primário primeiro, à esquerda, sob o último campo
- no celular, empilhados na largura toda
Não faça
- dois primários no mesmo formulário
- cor pela natureza da ação (verde aprovar, âmbar pausar)
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-button | secundário (base) |
.hx-button-primary / -danger / -danger-solid / -link | nível na hierarquia |
.hx-button-compact | 36 px com ponteiro fino |
.hx-button-icon | só ícone, 44 × 44, com aria-label |
.hx-actions | fileira de ações: empilha no celular |
disabled, aria-busy="true" | estado de envio |
Origem: cap. 04 §3.6 · ADR-0010, ADR-0016 · desde a versão 0.1.0