# ActionBar

> Floating toolbar for bulk actions on a selection.

Source: https://ui.jcsoftdev.com/docs/components/action-bar

Floating toolbar for bulk actions on a selection. Announces the count politely.

## Import

```ts
import { ActionBar } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/action-bar`.

## Usage

```tsx
export const Default: Story = { render: () => <Demo width="32rem" /> };
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `selectedCount` * | `number` |  | Number of selected items. The bar renders nothing while it is 0. |
| `noun` | `[singular: string, plural: string]` | `["seleccionado", "seleccionados"]` | Singular and plural noun for the live count, e.g. ["cita", "citas"]. |
| `onClear` | `(() => void)` |  | Clears the selection (close button and Escape). |
| `children` | `ReactNode` |  | Bulk actions, usually Buttons. |
| `position` | `"absolute" \| "fixed" \| "static"` | `"absolute"` | `fixed` floats over the viewport; `absolute` floats inside the nearest positioned ancestor (a card, a table wrapper); `static` renders inline. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-actionbar--default)
- [Narrow](/storybook/?path=/story/containers-actionbar--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-actionbar--brutal-preset)
- [Glass Preset](/storybook/?path=/story/containers-actionbar--glass-preset)

## Source

`packages/ui/src/containers/action-bar/action-bar.tsx`