Action bar

Floats over a list while rows are selected. Holds the actions for the selection.

import { ActionBar, Button } from "@openperf/deft";
import { useState } from "react";

import { Preview } from "../../src/Preview";

export default function ActionBarBasic() {
  const [count, setCount] = useState(2);

  return (
    <Preview>
      <Button.Root
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Select one more
      </Button.Root>
      <ActionBar
        count={count}
        onClear={() => {
          setCount(0);
        }}
      >
        <Button.Root shape="pill" size="sm" variant="primary">
          Action
        </Button.Root>
      </ActionBar>
    </Preview>
  );
}

One visible action, as a primary pill Button of size sm. Everything else goes behind a ⋯ menu.
The bar shows the count (“2 selected”) and a clear button. Esc anywhere on the page or the clear button calls onClear; the bar renders nothing at zero.
Place it at the end of the scrolling content; it sticks just above the bottom edge of the viewport.
It is a toolbar labelled “Bulk actions”, and screen readers announce the count when it changes.

API

PropType

countnumber

Selected rows. The bar hides at 0.

Typenumber

onClear() => void

Called by Esc and the clear button.

Type() => void

Other props go to the native div.