Components

ActionBar

Bulk actions for selected items; it appears with the first selection and says how many items are selected.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. Select items; the bar rises from below with the first selection and refreshes smoothly as the count changes.

Live example, StorybookOpen in Storybook

Default

ActionBar shows the selection count, a clear-selection button and the actions. The example uses placement="inline"; the default floating fixes the bar to the bottom of the screen.

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>
  );
}

Icon-only actions

In narrow spaces actions can show only an icon with iconOnly; the name comes from label.

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

export default function IconOnly() {
  return (
    <Provider locale="en-GB">
      <ActionBar placement="inline" count={2} onClear={() => {}}>
        <ToolbarButton label="Download" icon="download" iconOnly />
        <ToolbarButton label="Copy" icon="copy" iconOnly />
        <ToolbarButton label="Delete" icon="trash" iconOnly />
      </ActionBar>
    </Provider>
  );
}

Custom count text

countLabel gives text that says what is selected.

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

export default function CustomCount() {
  return (
    <Provider locale="en-GB">
      <ActionBar placement="inline" count={12} onClear={() => {}} countLabel={(count) => `${count} files selected`}>
        <ToolbarButton label="Download" icon="download" />
      </ActionBar>
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

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>
  );
}