Interação

Botão com ações extras

Split button

Combina uma ação principal com um botão separado que abre alternativas.

Salvar⌄

Exemplo didático · Representação visual do padrão

Quando usar

Acelerar a ação mais usada sem esconder alternativas próximas.

Cuidados e acessibilidade

Cada parte precisa de nome e foco próprios; não aninhe botões.

Partes e comportamento

Acionador principal e controle separado para alternativas.

Não confunda

O menu é um controle separado; não atribua duas ações diferentes ao mesmo clique.

Exemplo de código

<div class="split-button">
  <button type="button">Salvar</button>
  <button type="button" aria-label="Mais opções para salvar"
    aria-expanded="false" aria-controls="opcoes">⌄</button>
</div>
<!-- Implemente abertura, fechamento e teclado do menu de opções. -->

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Botão com ações extras (Split button) em português do Brasil. Combina uma ação principal com um botão separado que abre alternativas. Contexto de uso: Acelerar a ação mais usada sem esconder alternativas próximas. Estrutura: Acionador principal e controle separado para alternativas. Referência técnica: <button> + <button>. Requisito: Cada parte precisa de nome e foco próprios; não aninhe botões. Considere também: O menu é um controle separado; não atribua duas ações diferentes ao mesmo clique. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗