build69
build69  /  Components  /  BulkActionBar /  Source

BulkActionBar

The bar a list shows once rows are ticked: a three-state select-all, the selected count, optional quick selections behind a menu, the actions, and Deselect all. Lifted out because every list was rebuilding it from a Checkbox and some Buttons and each rebuild got a different part wrong. An action declares which selection SIZES it applies to and why it does not apply otherwise, and the reason reaches both the tooltip and the accessible name. While one action runs the bar stays put, that action shows it is working and the rest disable, so a second bulk delete cannot start on rows the first one is deleting.

Open docs← Back to catalog
3 files2 dependenciestokens resolved ✓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { surface, type Tone, type Emphasis } from "@/lib/recipes";

// BulkActionBar — The bar a list shows once rows are ticked: a three-state select-all, the selected count,
export interface BulkActionBarProps extends React.ComponentProps<"div"> {
  /** Semantic role: which accent the component uses. */
  tone?: Tone;
  /** Visual loudness: how prominent it reads. */
  emphasis?: Emphasis;
}

export function BulkActionBar({
  className,
  tone = "primary",
  emphasis = "solid",
  ...props
}: BulkActionBarProps) {
  return (
    <div
      data-slot="bulk-action-bar"
      data-tone={tone}
      data-emphasis={emphasis}
      className={cn(
        "inline-flex items-center gap-2 rounded-lg transition-colors",
        surface(tone, emphasis),
        className,
      )}
      {...props}
    />
  );
}