Selection Toolbar

Overview

SelectionToolbar surfaces bulk actions for selected rows or items. It renders as a floating contextual surface and composes Cubitt Button, Menu, and Popover parts for actions.

Usage

import {
  SelectionToolbar,
  type SelectionAction,
} from "@tilt-legal/cubitt-components/selection-toolbar";

Examples

Basic

A floating toolbar with direct actions, confirmation, success, and clear selection behavior.

import { Button } from "@tilt-legal/cubitt-components/button";
import { SelectionToolbar } from "@tilt-legal/cubitt-components/selection-toolbar";
import {
  Archive,
  PenWriting,
  Trash2,
} from "@tilt-legal/cubitt-icons/ui/outline";
import { useState } from "react";

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

  const actions = [
    {
      id: "edit",
      label: "Edit",
      icon: PenWriting,
      onClick: async () => {},
      successMessage: "Items updated successfully",
    },
    {
      id: "archive",
      label: "Archive",
      icon: Archive,
      onClick: async () => {},
      successMessage: "Items archived",
    },
    {
      id: "delete",
      label: "Delete",
      icon: Trash2,
      variant: "destructive" as const,
      confirmationMessage: `Are you sure you want to delete ${selectedCount} item(s)?`,
      confirmText: "Delete",
      onClick: async () => {},
      successMessage: "Items deleted successfully",
    },
  ];

  return (
    <div className="relative h-24">
      <SelectionToolbar
        actions={actions}
        onClear={() => setSelectedCount(0)}
        position="container"
        selectedCount={selectedCount}
        totalCount={10}
      />
      <Button
        onClick={() => setSelectedCount(selectedCount > 0 ? 0 : 3)}
        size="sm"
        variant="secondary"
      >
        {selectedCount > 0 ? "Clear selection" : "Select items"}
      </Button>
    </div>
  );
}

Button Actions

Actions can be disabled while still remaining in the toolbar layout.

const actions = [
  {
    id: "duplicate",
    label: "Duplicate",
    icon: Copy,
    onClick: async () => {},
    successMessage: "Items duplicated successfully",
  },
  {
    id: "edit",
    label: "Edit",
    icon: PenWriting,
    disabled: selectedCount > 5,
    onClick: async () => {},
    successMessage: "Items updated",
  },
  {
    id: "delete",
    label: "Delete",
    icon: Trash2,
    variant: "destructive",
    confirmationMessage: `Are you sure you want to delete ${selectedCount} item(s)?`,
    onClick: async () => {},
  },
];

Use a dropdown action when selected items share several related bulk actions.

const actions = [
  {
    id: "bulk-actions",
    label: "Bulk Actions",
    type: "dropdown",
    icon: Dots,
    items: [
      {
        id: "archive",
        label: "Archive Items",
        icon: Archive,
        onClick: async () => {},
        successMessage: "Items archived successfully",
      },
      {
        id: "delete",
        label: "Delete Permanently",
        icon: Trash2,
        destructive: true,
        confirmationMessage: "This action cannot be undone. Are you sure?",
        confirmText: "Delete",
        onClick: async () => {},
      },
    ],
  },
];

Custom Text

Override the selection copy when the toolbar needs to summarize selected data.

<SelectionToolbar
  actions={actions}
  onClear={() => setSelectedCount(0)}
  position="container"
  selectedCount={selectedCount}
  selectionText={`${selectedCount} items selected`}
  totalCount={totalCount}
/>

Popover actions can render custom controls while still reporting processing, success, and error states through the toolbar.

const actions = [
  {
    id: "color-picker",
    label: "Set Color",
    type: "popover",
    icon: Palette,
    popoverContent: ({ onProcessing, onSuccess, onError, onClose }) => (
      <div className="grid grid-cols-5 gap-2.5 p-4">
        {colors.map((color) => (
          <button
            key={color.name}
            onClick={async () => {
              try {
                onClose();
                onProcessing();
                await applyColor(color);
                onSuccess(`${color.name} applied`);
              } catch {
                onError("Failed to apply color");
              }
            }}
            style={{ backgroundColor: color.hex }}
            type="button"
          />
        ))}
      </div>
    ),
  },
];

API Reference