ButtonBar
A barra de ações do ME — botões com overflow "Mais ações", menu de opções e tooltips. O miolo do subheader.
ButtonBar, usado no código como <MeButtonBar>. No Figma, use o componente da Library; é ele que padroniza qualquer fileira de ações.O ButtonBar é uma fileira de botões de ação que colapsa o excedente em Mais ações conforme falta espaço. É o miolo do Subheader e a forma canônica de apresentar as ações de suporte de uma tela — nunca espalhe botões soltos.
Uso em tela
Lê-se da esquerda pra direita, em ordem de importância. As ações que cabem ficam visíveis; o resto recolhe em Mais ações (overflow responsivo) — então a barra nunca "estoura" a largura. Ações pouco frequentes ou administrativas vão no menu Opções (à direita). Cada botão pode ter tooltip (description) para esclarecer um ícone sem texto.
Mantenha 2–3 ações visíveis no máximo; acima disso, deixe o overflow decidir. A ação primária da tela ("Novo X") não vive aqui — ela é o split do Subheader; o ButtonBar carrega as secundárias.
Aplicação
A mesma barra aparece em vários níveis do produto:
| Onde | Ações típicas |
|---|---|
| Subheader da index | Editar · Duplicar · Arquivar · Mais ações |
| Toolbar de documento | Mover para projeto · Enviar follow up · Exportar |
| Barra de seleção (massa) | Exportar · Cancelar selecionados |
| Cabeçalho de seção | ações locais daquele bloco |
O comportamento (overflow, tooltip, opções) é idêntico em todos; muda só o conjunto de ações.
Variantes
Escolha pelo cenário:
| Quero… | Use |
|---|---|
| Cor padrão de toda a barra | color na barra (primary · neutral · error · success · warning) |
| Cor só de um botão | color no objeto da ação (sobrepõe a barra) |
| Estilo dos botões | variant (ghost em toolbar, outline para destacar) |
| Densidade | size (sm em tabela densa · md padrão · lg) |
| Menu de ações secundárias | options (vira o menu Opções) |
| Conteúdo extra entre ações e opções | slot default (ex.: abas, filtros) |
Estados
| Estado | Comportamento |
|---|---|
| Default | Ações visíveis até caber; excedente em Mais ações. |
disabled (por ação) | Botão inerte — use quando a ação não se aplica ao contexto atual. |
loading (por ação) | Spinner no botão durante a operação. |
| Overflow responsivo | visibleActions fixa quantas ficam visíveis; maxVisibleActions limita o teto antes do overflow. |
No código
<MeButtonBar> é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: eletro.design/components/buttonbar. Aqui o foco é o uso em Design.
Acessibilidade
Ações só com ícone exigem rótulo acessível (não dependa só do tooltip, que aparece no hover). O menu Mais ações e o Opções precisam ser alcançáveis e operáveis por teclado. Estados disabled/loading devem ser percebidos além da cor.