ActionBar

When to use

ActionBar shows actions that apply to all selected items when several items in a list or table are selected: archive, move, delete. It appears with the first selection and goes away when the selection is cleared.

When not to use

• For the actions of a single item: Show them inside the row.
• For actions that do not depend on a selection: Use Toolbar or the PageHeader actions.
• On pages without selection: The bar should not be always visible.

Anatomy

3 selected

3 selected

ArchiveMove

Delete

LightDark

Copy code

import { ActionBar, Provider, ToolbarButton, ToolbarSeparator } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [count, setCount] = useState(3);
  return (
    <Provider locale="en-GB">
      <ActionBar placement="inline" count={count} onClear={() => setCount(0)}>
        <ToolbarButton label="Archive" icon="download" />
        <ToolbarButton label="Move" icon="arrow-right" />
        <ToolbarSeparator />
        <ToolbarButton label="Delete" icon="trash" />
      </ActionBar>
    </Provider>
  );
}

1. Clear button: Removes the selection; icon only, named from the Provider.
2. Count: Says how many items are selected.
3. Separator: Divides the count from the actions.
4. Actions: ToolbarButtons that apply to all selected items.

Behaviour

• When count goes above 0 the bar rises 8 px and fades in. With reduced motion only the opacity changes.
• When the count changes the text fades in again and is announced to screen readers once.
• The bar is a single tab stop; arrow keys move between its buttons. Escape inside the bar clears the selection.
• A floating bar is fixed to the bottom of the screen and centred; below 640 px it takes the full width with a gutter on both sides. An inline bar stays where you render it.
• Focus stays where it is when the bar appears, so the user can keep selecting.

Guidelines

• Show three to five actions; put the action that cannot be undone last and ask for confirmation.
• Keep the actions applicable to all selected items.
• Use one ActionBar per page.
• Leave space at the bottom of the page as tall as the bar so a floating bar does not cover content.

Content

• Action labels are short verbs.
• The count text can say what is selected: “12 files selected”.

Turkish	English
Toplu eylemler	Bulk actions
3 öğe seçildi	3 selected
Seçimi temizle	Clear selection
Arşivle	Archive

Glass

Under a Provider material="glass", the bar turns glass. material="solid" keeps it solid.

Related components

• Toolbar: Controls that do not depend on a selection.
• Checkbox: For selecting items.
• SplitButton: A main action and its variants.