Bulk Operations

Actions performed on many records.

html

<div class="bulk" data-count="2">
  <div class="bulk__row"><span class="bulk__check"></span>Invoice 001</div>
  <div class="bulk__row"><span class="bulk__check"></span>Invoice 002</div>
  <div class="bulk__row"><span class="bulk__check"></span>Invoice 003</div>
  <div class="bulk__row"><span class="bulk__check"></span>Invoice 004</div>
  <div class="bulk__bar" style="background:#E8A020;" role="status">2 selected &mdash; <strong>Archive</strong></div>
</div>
<style>
.bulk { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.bulk__row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #24143014; }
.bulk__check { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #24143040; box-sizing: border-box; flex-shrink: 0; }
.bulk__bar { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12px; text-align: center; color: #241430; }
.bulk[data-count="0"] .bulk__bar { display: none; }
.bulk[data-count="2"] .bulk__row:nth-child(-n+2) .bulk__check, .bulk[data-count="4"] .bulk__row .bulk__check { background: #241430; border-color: #241430; }
.bulk[data-count="2"] .bulk__bar, .bulk[data-count="4"] .bulk__bar { display: block; }
</style>

tailwind

<div class="bulktw bulktw--2 font-sans text-[#241430] bg-[#FAF7F2] p-3.5 rounded-xl w-[280px] box-border">
  <div class="bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]"><span class="bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block"></span>Invoice 001</div>
  <div class="bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]"><span class="bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block"></span>Invoice 002</div>
  <div class="bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]"><span class="bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block"></span>Invoice 003</div>
  <div class="bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]"><span class="bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block"></span>Invoice 004</div>
  <div class="bulktw__bar hidden mt-2.5 py-2.5 px-3 rounded-lg text-xs text-center" style="background:#E8A020;" role="status">2 selected &mdash; <strong>Archive</strong></div>
</div>
<style>
.bulktw--2 .bulktw__row:nth-child(-n+2) .bulktw__check, .bulktw--4 .bulktw__check { background: #241430; border-color: #241430; }
.bulktw--2 .bulktw__bar, .bulktw--4 .bulktw__bar { display: block; }
</style>

react

export function BulkOperations({
  actionLabel = "Archive",
  selectedCount = "2",
  accent = "#E8A020",
  showBar = true,
}) {
  const n = Number(selectedCount);
  const rows = ["Invoice 001", "Invoice 002", "Invoice 003", "Invoice 004"];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 14, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      {rows.map((label, i) => (
        <div key={label} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 6px", borderBottom: "1px solid #24143014" }}>
          <span style={{ width: 16, height: 16, borderRadius: 4, boxSizing: "border-box", flexShrink: 0, border: i < n ? "2px solid #241430" : "2px solid #24143040", background: i < n ? "#241430" : "transparent" }} />
          {label}
        </div>
      ))}
      {showBar && n > 0 && (
        <div role="status" style={{ marginTop: 10, padding: "10px 12px", borderRadius: 8, fontSize: 12, textAlign: "center", color: "#241430", background: accent }}>
          {selectedCount} selected &mdash; <strong>{actionLabel}</strong>
        </div>
      )}
    </div>
  );
}