# BulkActionBar

A single-row selection command capsule with adaptive overflow.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, BulkActionBar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BulkActionBar label="Selected projects" selectionCount={2}
        items={[{id:"archive",label:"Archive",priority:10},{id:"pause",label:"Pause"},{id:"activate",label:"Set active"}]}
        onAction={(id) => console.log(id)} onClear={() => console.log("clear")} />
    </FloodRoot>
  );
}
```

## Design notes

- The default is a pill-shaped single row with at most two visible commands. maxVisibleActions accepts 1, 2 or 3; available space can reduce that number further.
- Lower-priority commands move to More. selectionLabel, clearLabel and moreLabel support localized content; selectionCount=0 renders nothing.
- pending disables commands and clearing. The host owns selected IDs, accepted updates, confirmation and focus after removal.
- The component is inline by default. A floating host supplies bounded viewport positioning, safe-area spacing and scroll clearance. Use a stable width so adaptive measurement does not depend on the currently visible commands.
- counter accepts label (default), number or none. Visible counters reserve a stable width across digit changes; counterWidth adapts that reservation to a localized label. Numeric mode retains the complete accessible selectionLabel. Hidden mode removes the slot.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `selectionCount` | `number` | `Required` |
| `selectionLabel` | `string` | `—` |
| `counter` | `"label" \| "number" \| "none"` | `—` |
| `counterWidth` | `CSSProperties["inlineSize"]` | `—` |
| `items` | `readonly OverflowAction[]` | `Required` |
| `onAction` | `(id: string) => void` | `—` |
| `onClear` | `() => void` | `Required` |
| `clearLabel` | `string` | `—` |
| `moreLabel` | `string` | `—` |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `maxVisibleActions` | `1 \| 2 \| 3` | `—` |
| `disabled` | `boolean` | `—` |
| `pending` | `boolean` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onAction">` | `Forwarded` |