Componentes
Grupo de botões
Ações relacionadas, encostadas, que parecem um elemento só — zoom, exportar, anterior e próximo numa visualização.
Quando usar
- 2–4 ações do mesmo assunto, secundárias
Quando não usar
- escolher uma opção (use o grupo de botões de escolha, em Escolhas)
- o botão primário — ele fica sozinho
Exemplos
claro
escuro
<div class="hx-button-toolbar">
<div class="hx-button-group" role="group" aria-label="Zoom">
<button class="hx-button hx-button-icon" type="button" aria-label="Diminuir"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-chevron-left"></use></svg></button>
<button class="hx-button" type="button">100%</button>
<button class="hx-button hx-button-icon" type="button" aria-label="Aumentar"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-chevron-right"></use></svg></button>
</div>
<div class="hx-button-group" role="group" aria-label="Exportar">
<button class="hx-button" type="button">Copiar</button>
<button class="hx-button" type="button">Baixar CSV</button>
</div>
</div>Ação × escolha
| Classe ou atributo | Quando |
|---|---|
.hx-button-group | ações: cada botão faz uma coisa; nada fica "selecionado" |
.hx-segmented | escolha de 2–4 opções: rádios nativos, uma fica marcada — ver Escolhas |
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-button-group + role="group" + aria-label | o grupo, com nome |
.hx-button-toolbar | vários grupos lado a lado |
Origem: cap. 10 §3.2 · ADR-0038 · desde a versão 0.4.0