BulkActionBar

Use BulkActionBar

A single-row selection command capsule with adaptive overflow.

"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