Bulk Action

Action applied to multiple records.

html

<button type="button" class="btn-bulk btn-bulk--neutral" style="border-radius:8px">
  Delete <span class="btn-bulk__count">4 selected</span>
</button>
<style>
.btn-bulk {
  font: 600 14px/1 system-ui, sans-serif;
  padding: 10px 16px;
  border: 2px solid #241430;
  background: transparent;
  color: #241430;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-bulk--destructive { border-color: #C23B3B; color: #C23B3B; }
.btn-bulk:hover:not(:disabled) { background: rgba(36,20,48,.08); }
.btn-bulk--destructive:hover:not(:disabled) { background: rgba(194,59,59,.08); }
.btn-bulk:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-bulk:disabled { opacity: .4; cursor: not-allowed; }
.btn-bulk__count {
  font-weight: 500; opacity: .7; font-size: 12px;
  padding: 2px 7px; border-radius: 999px; background: rgba(36,20,48,.08);
}
.btn-bulk--destructive .btn-bulk__count { background: rgba(194,59,59,.1); }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold border-2 bg-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed btn-bulk-tw btn-bulk-tw--neutral" style="border-radius:8px">
  Delete <span class="text-xs font-medium opacity-70 px-1.5 py-0.5 rounded-full btn-bulk-tw__count">4 selected</span>
</button>
<style>
.btn-bulk-tw--neutral { border-color: #241430; color: #241430; }
.btn-bulk-tw--neutral:hover:not(:disabled) { background: rgba(36,20,48,.08); }
.btn-bulk-tw--neutral .btn-bulk-tw__count { background: rgba(36,20,48,.08); }
.btn-bulk-tw--destructive { border-color: #C23B3B; color: #C23B3B; }
.btn-bulk-tw--destructive:hover:not(:disabled) { background: rgba(194,59,59,.08); }
.btn-bulk-tw--destructive .btn-bulk-tw__count { background: rgba(194,59,59,.1); }
.btn-bulk-tw--neutral:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function BulkActionButton({
  label = "Delete",
  count = 4,
  tone = "neutral",
  radius = 8,
  disabled = false,
}) {
  const destructive = tone === "destructive";
  const accent = destructive ? "#C23B3B" : "#241430";
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "10px 16px",
        borderRadius: radius,
        border: `2px solid ${accent}`,
        background: "transparent",
        color: accent,
        font: "600 14px/1 system-ui, sans-serif",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      {label}
      <span
        style={{
          fontSize: 12,
          fontWeight: 500,
          opacity: 0.8,
          padding: "2px 7px",
          borderRadius: 999,
          background: destructive ? "rgba(194,59,59,.1)" : "rgba(36,20,48,.08)",
        }}
      >
        {count} selected
      </span>
    </button>
  );
}