# Selection Action Bar (`selection-action-bar`) - SignalOS widget

> Contextual action bar for a table's row selection - export/delete/clear next to the table, shown in place of a caller-supplied fallback.

- **Version:** 0.1.0
- **Kind:** widget · **Category:** inputs
- **Install:** `npx shadcn@4.1.2 add @signalos/selection-action-bar`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/button
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/widgets/selection-action-bar/SelectionActionBar.tsx`, `src/components/widgets/selection-action-bar/SelectionActionBar.types.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
import { SelectionActionBar } from "@/components/widgets/selection-action-bar/SelectionActionBar"
```

## Example

```tsx
// Example: the snippet shown as public example code in the catalog.
import { useState } from "react"

import { SelectionActionBar } from "@/components/widgets/selection-action-bar/SelectionActionBar"

export default function Example() {
  const [selectedCount, setSelectedCount] = useState(3)

  return (
    <SelectionActionBar
      selectedCount={selectedCount}
      itemLabel="user"
      onClear={() => setSelectedCount(0)}
      onExportSelected={() => {}}
      onDeleteSelected={() => {}}
      fallback={<button>Add User</button>}
    />
  )
}
```

## Props

### `SelectionActionBarProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `selectedCount` | `number` | yes | - | Number of currently-selected rows. Renders nothing when 0 (see `fallback`). |
| `itemLabel` | `string` | yes | - | Singular noun for the row type, e.g. "user". Pluralised with an "s". |
| `onClear` | `() => void` | yes | - | Called when the user clears the current selection. |
| `onExportSelected` | `(() => void) \| undefined` | no | - | Omit to hide the export action. |
| `onDeleteSelected` | `(() => void) \| undefined` | no | - | Omit to hide the delete action. |
| `isExporting` | `boolean \| undefined` | no | - | Shows the export action in a busy state and disables all actions. |
| `isDeleting` | `boolean \| undefined` | no | - | Shows the delete action in a busy state and disables all actions. |
| `fallback` | `ReactNode` | no | - | Rendered when nothing is selected - normally the page's own actions. |
| `className` | `string \| undefined` | no | - |  |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the root element. |

## Changelog

# selection-action-bar

## 0.1.0

- Initial release: contextual toolbar for a table's row selection
  (`selectedCount`, `itemLabel`). Shows export/delete actions when their
  handlers are supplied, a clear action always, and renders a caller-supplied
  `fallback` (typically the page's primary action) when nothing is selected.
  `isExporting`/`isDeleting` put the bar in a busy state and disable every
  action.