Selection Action Bar

v0.1.0

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

View as Markdown

Install

npx shadcn@4.1.2 add @signalos/selection-action-bar

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/button) are pulled automatically.

Preview

Example & code

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

npm dependencies

lucide-react@^1.7.0

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.