ActionBar

Barra flutuante com ações em lote que aparece quando há seleção.

A ActionBar é a barra pílula fixa no pé da tela que surge quando você seleciona itens: contagem, ações (Pausar, Arquivar) e "Limpar seleção". Combine-a com ListView ou DataGrid em modo de seleção múltipla; para ações sobre um único item, use Dropdown.

import { ActionBar } from "@rastreio-x/ui";

Padrão

isOpen controla a aparição (obrigatório). A barra tem três áreas opcionais: ActionBar.Prefix (contagem), ActionBar.Content (ações) e ActionBar.Suffix (limpar). A barra é fixa no pé da viewport; nos exemplos, o contêiner usa transform-gpu para mantê-la dentro do preview.

Marina Souza

Rafael Lima

Beatriz Alves

Com DataGrid

Seleção de Pedidos na lista do Admin: a barra mostra a contagem e as ações em lote.

Pedido	Cliente	Transportadora
ped-8	Marina Souza	Pluma
ped-7	Rafael Lima	Nimbo
ped-6	Beatriz Alves	Trilha

Rótulos responsivos

Marque o texto de uma ação com action-bar__label: abaixo de 640 px ele vira sr-only, e o botão fica só com ícone (mantendo o aria-label).

Anatomia

ActionBar
├── ActionBar.Content
├── ActionBar.Prefix
└── ActionBar.Suffix

ActionBar.Prefix: contagem de selecionados em um Chip.
ActionBar.Content: botões de ação (size="sm", variant="ghost").
ActionBar.Suffix: botão "Limpar seleção".
Separator entre as áreas.

Propriedades

ActionBar:

ActionBar
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`isOpen`*	`boolean`	-	Controla se o elemento está aberto (controlado).
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`className`	`ClassNameOrFunction<ToolbarRenderProps>`	`'react-aria-Toolbar'`	Classes CSS aplicadas ao elemento.
`isAttached`	`boolean`	-	Encaixa a barra de ações à borda do contêiner, sem espaço em volta.
`orientation`	`Orientation`	`'horizontal'`	Orientação do componente: `horizontal` ou `vertical`.
`render`	`DOMRenderFunction<'div', ToolbarRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<ToolbarRenderProps>`	-	Estilos em linha aplicados ao elemento.

Animações

motion.dev
indicativo

A barra entra e sai com animação de deslocamento e opacidade do motion. Com prefers-reduced-motion, a animação é reduzida a uma troca de opacidade quase imediata pela folha global da fachada.

Acessibilidade

É um toolbar: Tab entra, setas movem entre as ações, Esc não fecha (limpe a seleção para dispensá-la).
Dê aria-label à barra ("Ações em lote") e a cada botão só com ícone.
Anuncie a contagem: o Chip com o número fica ao lado do rótulo "selecionados" para o leitor de tela, ou use uma região aria-live à parte.
Ações destrutivas ficam separadas e com texto, não só a cor danger.
A barra não deve cobrir o conteúdo selecionado: reserve espaço no pé da lista.

Boas práticas

Faça

Poucas ações (até quatro), contagem sempre visível e “Limpar seleção” à mão.

Evite

Uma barra que aparece sem seleção, ou ações que só valem para um item.

Mostre a barra só enquanto houver seleção.
Ações destrutivas pedem confirmação em AlertDialog.
No celular, deixe só os ícones (action-bar__label).

Relacionados

ListView e DataGrid, as listas que a alimentam.
Dropdown para ações de um item.
AlertDialog para confirmar ações destrutivas.