Ações em massa
Como funciona a badge de seleção múltipla, como os CTAs do Subheader agem sobre a seleção e como incluir a contagem no feedback de confirmação.
Boas Práticas
Ações em massa permitem executar uma mesma operação em múltiplos registros simultaneamente. Ao selecionar itens, a interface deve indicar claramente a quantidade afetada e adaptar as ações disponíveis ao contexto da seleção.
Contextos
A apresentação de ações em massa varia conforme o contexto, mas deve sempre comunicar a seleção ativa, o volume de registros envolvidos e o impacto das operações executadas.
O Filter Bar (criterion compact) fica entre o Subheader e a tabela. O header fica em estado indeterminate quando há seleção parcial.
Ao selecionar itens o Subheader permanece completamente inalterado — os mesmos CTAs agem sobre os marcados. A badge 'X selecionados' é um toggle: ativa, filtra a view para os selecionados, desabilita os filtros aplicados e expõe 'Salvar lista' e 'Limpar seleção'.
Dentro de documentos (ex.: cotação), a tabela de itens tem sua própria toolbar. As ações em massa ficam ali — 'Adicionar item', 'Atualização em massa', 'Excluir itens' — sem envolver o Subheader global.
Botões específicos de ação em massa ficam disabled enquanto nenhum item está selecionado. 'Adicionar item' permanece sempre ativo — é independente de seleção.
Após a ação, a badge de seleção some, os filtros voltam a ficar ativos e a seleção é desmarcada. O Toast confirma quantos itens foram afetados — sem alertas inline ou banners.
Hierarquia
Index (lista de registros)
- CTAs do Subheader: funcionam sobre os itens selecionados sem mudar de aparência — "Enviar 3 documentos", "Bloquear 2 fornecedores". Nenhum botão é adicionado ou removido.
- Badge de seleção no Filter Bar: surge logo após o checkbox e funciona como toggle — ao ativar, filtra a view pelos marcados, desabilita os filtros aplicados (o MeCriterionInput em estado disabled) e expõe "Salvar lista" e "Limpar seleção".
- Escopo da ação: aplica-se a todos os itens selecionados, inclusive os de outras páginas — clicar na badge filtra a view para confirmar o escopo antes de agir.
- Ações destrutivas em massa sempre exigem modal de confirmação com a contagem: "Excluir 5 itens? Esta ação não pode ser desfeita."
Documento (ex.: cotação, pedido)
- Toolbar da tabela: superfície dedicada para ações em massa — "Adicionar item" (sempre ativo), "Atualização em massa" e "Excluir itens" (disabled sem seleção).
- Escopo restrito à tabela: as ações afetam apenas os itens da tabela daquele documento — não interagem com registros globais do índice.
- Estilo destrutivo: "Excluir itens" usa outlined error (border + text-error, sem bg fill) — destaca a destrutividade sem dominar visualmente a toolbar.
- Sem badge de contagem: a contagem de itens selecionados é mostrada inline na toolbar, não em um Filter Bar separado.
Suporte a seleção em massa por view
Padrão canônico — checkbox por linha, checkbox de header, seleção multi-página.
Checkbox à esquerda de cada item de lista. Mesma badge no Filter Bar.
Checkbox no canto superior do card quando a view suportar seleção. Menos comum — avalie o caso de uso.
Foco em um item por vez — seleção múltipla não é compatível com o modo Preview.
1 — Padrão de seleção no Index
Comportamento
- Badge "X selecionados" aparece no Filter Bar quando ≥ 1 checkbox está marcado
- Badge desaparece quando todos os checkboxes são desmarcados ("Limpar seleção")
- Seleção persiste ao navegar entre páginas — clicar na badge (toggle) filtra a view pelos selecionados
Elementos presentes com seleção ativa
- Filter Bar: badge "X selecionados" (toggle) + "Salvar lista" + "Limpar seleção"; ao ativar a badge, os filtros aplicados ficam desabilitados
- Subheader: completamente inalterado — os mesmos CTAs de sempre, agindo sobre a seleção; nenhum botão é adicionado ou removido
- Contagem: "X selecionados" — atualizada em tempo real ao marcar/desmarcar
Heurísticas aplicadas
- Eficiência e flexibilidade de uso — permite operações em lote sem repetição de ação
- Visibilidade do status do sistema — badge "X selecionados" aparece no Filter Bar somente com seleção ativa
- Prevenção de erros — ações destrutivas em massa sempre exigem modal de confirmação com contagem explícita
- Feedback claro — indica quantos itens serão afetados antes e depois da ação
- Controle e liberdade — a badge funciona como toggle: filtra a view pelos selecionados; "Salvar lista" guarda a seleção e "Limpar seleção" desfaz tudo com um clique
2 — Checkboxes de seleção
Estrutura
- Checkbox por linha: à esquerda, sempre visível (não apenas no hover)
- Checkbox "Selecionar todos" no header: seleciona/deseleciona a página atual
Estados
- Estado intermediário (indeterminate): quando parte das linhas está selecionada
- Comportamento: Shift+click para seleção em range
Heurísticas aplicadas
- Consistência — checkboxes no padrão de tabelas do produto; badge de contagem no Filter Bar
- Controle e liberdade — "Limpar seleção" disponível no Filter Bar a qualquer momento durante seleção ativa
- Prevenção de erros — badge descreve claramente a contagem: "2 selecionados"
- Seleção multi-página — itens selecionados persistem ao navegar entre páginas; clicar na badge filtra apenas os marcados
3 — Ações disponíveis em massa
Ações padrão
- Exportar — Exportar 5 cotações
- Enviar — Enviar 3 documentos
- Aprovar — Aprovar 4 pedidos
- Arquivar — Arquivar 7 contratos
- Bloquear — Bloquear 2 fornecedores (exige confirmação)
- Inativar — Inativar 2 usuários (exige confirmação)
- Rejeitar — Rejeitar 4 solicitações
Ações destrutivas
- Excluir — Excluir 5 itens (exige confirmação)
- Remover — Remover 3 itens da lista (exige confirmação)
Confirmação de ação destrutiva
- Toda ação destrutiva em massa exige modal de confirmação com a contagem: "Excluir 5 itens? Esta ação não pode ser desfeita."
4 — Estado disabled na toolbar de documentos
Comportamento
- Na toolbar de documentos, os CTAs específicos de massa ficam disabled enquanto nenhum item está selecionado
- Tornam-se enabled quando ≥ 1 item está selecionado
- O estado disabled sinaliza ao usuário que a ação exige seleção prévia — evita cliques sem alvo definido
Onde se aplica
- Toolbar de tabela em documentos: "Atualização em massa", "Excluir itens" — disabled por padrão; ativos com seleção
- Index — Subheader: nenhum CTA é desabilitado pela seleção; os CTAs continuam ativos e passam a agir sobre os itens marcados
- Index — Filter Bar: ao ativar a badge de seleção, os filtros aplicados e seus controles ficam desabilitados
CTAs que não são afetados
- "Adicionar item" — ação independente de seleção, sempre ativo
- CTAs gerais do Subheader — sempre visíveis e ativos; o Subheader nunca é alterado pela seleção
Labeling
Em ações em massa, o rótulo deve sempre incluir a contagem dos itens afetados — na badge do Filter Bar, no CTA do modal e no Toast de feedback. Plural/singular correto e número explícito são obrigatórios.
Inclui a contagem no rótulo do CTA do modal
Usado em modais de confirmação e na badge do Filter Bar
Label de contagem sempre singular/plural correto
Exibido na badge do Filter Bar durante a seleção ativa
Fórmula: verbo de ação + contagem + entidade
- A badge "X selecionados" no Filter Bar deve aparecer apenas com seleção ativa — e atualizar a contagem em tempo real.
- "Salvar lista" e "Limpar seleção" ficam ao lado da badge no Filter Bar enquanto a seleção está ativa.
- Para ações destrutivas em massa, o modal deve mencionara irreversibilidade e a contagem antes da confirmação.
- A badge é um toggle: ao ativá-la, a view filtra para os itens marcados e os filtros aplicados ficam desabilitados — útil quando a seleção abrange múltiplas páginas.
- Na index, os CTAs do Subheader permanecem visíveis e passam aagir sobre a seleção — sem adicionar botões novos. (Disabled/enabled só na toolbar de documentos.)
- Não substitua os CTAs do Subheader por uma barra de ações em massa —o Subheader sempre preserva seus CTAs . As ações passam a agir sobre os itens selecionados.
- Não execute ações destrutivas em massasem modal de confirmação — o impacto é multiplicado.
- Não use"Todos os itens" sem deixar claro quantos são — sempre mostre o número para evitar surpresas.
- Não faça a seleçãosurgir ou sumir botões na index — a seleção só traz a badge e desabilita os filtros; os CTAs do Subheader continuam os mesmos.
Exemplos de uso
Ações em massa devem ser contextuais, visíveis apenas quando necessárias e sempre com contagem explícita dos itens afetados antes de qualquer ação destrutiva.
Subheader mantém seus CTAs; a badge de seleção aparece no Filter Bar
Ao selecionar itens, o Subheader preserva todas as suas ações e elas passam a agir sobre os marcados. O Filter Bar exibe a badge "X selecionados" (toggle) com "Salvar lista" e "Limpar seleção"; ao ativá-la, a view filtra para os selecionados e os filtros ficam desabilitados.
Trocar os CTAs do Subheader por ações de seleção em massa
Substituir as ações originais do Subheader por botões de seleção confunde o usuário e remove acesso às ações regulares da tela. No ME, o Subheader sempre persiste com seus CTAs normais.
Modal de confirmação antes de excluir em massa
"Excluir 4 cotações? Esta ação não pode ser desfeita." O modal lista quantos registros serão afetados. O CTA de confirmação está em vermelho e desabilitado até o usuário confirmar a leitura.
Executar exclusão em massa sem confirmação
Excluir múltiplos registros de uma vez sem modal de confirmação é uma das ações com maior custo de erro no produto. Nenhuma exceção — toda exclusão em massa exige confirmação explícita.
Checkbox indeterminate no header quando apenas alguns estão selecionados
O estado indeterminate do checkbox de header sinaliza uma seleção parcial — clicá-lo seleciona todos os itens da página. Esse estado é crítico para a usabilidade em listas longas.
Checkbox de header em estado unchecked quando há seleção parcial
Um checkbox vazio no header com alguns itens selecionados é ambíguo — o usuário não sabe se clicar vai selecionar os restantes ou deselecionar todos. O estado indeterminate elimina essa ambiguidade.
Feedback para Ações em Massa
Ações em massa afetam múltiplos registros simultaneamente. O feedback deve sempre informar a contagem de itens afetados — nunca mensagem genérica sem contexto. Escolha o componente pelo tipo de operação:
Use para confirmar a operação — sempre inclua a contagem de itens afetados.
Ex: "5 itens excluídos." / "3 pedidos aprovados."
Use quando o resultado precisa de acesso imediato — o link no Toast evita navegação manual.
Ex: "12 registros exportados. Ver arquivo →"
Use para indicar que a operação está em andamento — mantém visibilidade sem bloquear a interface.
Exibido enquanto o servidor processa a operação em lote
Processando 5 itens...