Row

Horizontal grouping.

html

<div class="row-demo">
  <h4 class="row-demo__heading">Actions</h4>
  <div class="row-demo__row row-demo__row--start" style="gap:10px;">
    <span class="row-demo__chip" style="border-color:#F5C2E0;">Approve</span>
    <span class="row-demo__chip" style="border-color:#F5C2E0;">Reject</span>
    <span class="row-demo__chip" style="border-color:#F5C2E0;">Delegate</span>
  </div>
</div>
<style>
.row-demo { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.row-demo__heading { margin: 0 0 10px; font-size: 15px; }
.row-demo__row { display: flex; flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.row-demo__row--wrap { flex-wrap: wrap; overflow: visible; }
.row-demo__row--center { justify-content: center; }
.row-demo__row--space-between { justify-content: space-between; }
.row-demo__chip { box-sizing: border-box; padding: 7px 14px; background: #fff; border: 1.5px solid; border-radius: 999px; white-space: nowrap; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4">
  <h4 class="m-0 mb-2.5 text-[15px]">Actions</h4>
  <div class="flex flex-nowrap max-w-full overflow-hidden row-tw row-tw--start" style="gap:10px;">
    <span class="box-border px-3.5 py-[7px] bg-white border-[1.5px] rounded-full whitespace-nowrap" style="border-color:#F5C2E0;">Approve</span>
    <span class="box-border px-3.5 py-[7px] bg-white border-[1.5px] rounded-full whitespace-nowrap" style="border-color:#F5C2E0;">Reject</span>
    <span class="box-border px-3.5 py-[7px] bg-white border-[1.5px] rounded-full whitespace-nowrap" style="border-color:#F5C2E0;">Delegate</span>
  </div>
</div>
<style>
.row-tw--wrap { flex-wrap: wrap; overflow: visible; }
.row-tw--center { justify-content: center; }
.row-tw--space-between { justify-content: space-between; }
</style>

react

export function Row({
  heading = "Actions",
  gap = 10,
  justify = "start",
  accent = "#F5C2E0",
  wrap = false,
}) {
  const justifyContent = { start: "flex-start", center: "center", "space-between": "space-between" }[justify];
  const chips = ["Approve", "Reject", "Delegate"];
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <h4 style={{ margin: "0 0 10px", fontSize: 15 }}>{heading}</h4>
      <div style={{ display: "flex", flexWrap: wrap ? "wrap" : "nowrap", justifyContent, gap, maxWidth: "100%", overflow: wrap ? "visible" : "hidden" }}>
        {chips.map((c) => (
          <span key={c} style={{ boxSizing: "border-box", padding: "7px 14px", background: "#fff", border: `1.5px solid ${accent}`, borderRadius: 999, whiteSpace: "nowrap" }}>{c}</span>
        ))}
      </div>
    </div>
  );
}