Button Soup

html

<div class="bs-demo">
  <span class="bs-demo__badge">{{unless fixed}}&#10007; Anti-pattern: button soup

tailwind

<div style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  <span class="bs-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: button soup

react

export function ButtonSoup({
  fixed = false,
  primaryLabel = "Save",
  accent = "#241430",
  size = 30,
}) {
  const soupBtn = { padding: "0 12px", height: size, borderRadius: 6, border: "1.5px solid #24143033", background: "#FAF7F2", cursor: "pointer" };
  const soupLabels = ["Cancel", "Export", "Share", "Duplicate", "Archive", "Delete", "More"];
  return (
    <div style={{ width: 320, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: button soup"}
      </span>
      {!fixed && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
          <button type="button" style={soupBtn}>{primaryLabel}</button>
          {soupLabels.map((l) => <button key={l} type="button" style={soupBtn}>{l}</button>)}
        </div>
      )}
      {fixed && (
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button type="button" style={{ padding: "0 18px", height: size, borderRadius: 7, border: "none", background: accent, color: "#FAF7F2", fontWeight: 700, cursor: "pointer" }}>{primaryLabel}</button>
          <button type="button" style={{ padding: "0 18px", height: size, borderRadius: 7, border: "1.5px solid " + accent, background: "transparent", color: accent, cursor: "pointer" }}>Cancel</button>
          <button type="button" style={{ padding: "0 12px", height: size, border: "none", background: "transparent", color: "#241430aa", cursor: "pointer" }}>More&hellip;</button>
        </div>
      )}
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{fixed ? "one clear primary action, one secondary, the rest tucked away" : "eight identical buttons, no visual priority \u2014 which one matters?"}</p>
    </div>
  );
}