---
title: Action bar
description: Floats over a list while rows are selected. Holds the actions for the selection.
---

```tsx
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](/deft/components/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `count` | `number` | - | Selected rows. The bar hides at 0. |
| `onClear` | `() => void` | - | Called by Esc and the clear button. |

Other props go to the native `div`.