Button Group Selector

Selection through grouped buttons.

html

<div class="btn-group btn-group--solid" role="group" aria-label="View as" style="--accent:#F5C2E0;">
  <button type="button" class="btn-group__btn" aria-pressed="true">List</button>
  <button type="button" class="btn-group__btn" aria-pressed="false">Grid</button>
</div>
<style>
.btn-group { display: inline-flex; font: 500 14px system-ui, sans-serif; color: #241430; border-radius: 8px; overflow: hidden; }
.btn-group--outline { border: 1.5px solid #24143040; }
.btn-group__btn { border: none; background: #FAF7F2; color: #241430; padding: 9px 16px; cursor: pointer; }
.btn-group--solid .btn-group__btn:not(:last-child) { border-right: 1px solid #24143020; }
.btn-group--outline .btn-group__btn:not(:last-child) { border-right: 1.5px solid #24143040; }
.btn-group__btn[aria-pressed="true"] { background: var(--accent); }
.btn-group__btn:hover { background: color-mix(in srgb, var(--accent) 40%, #FAF7F2); }
.btn-group__btn:focus-visible { outline: 2px solid #241430; outline-offset: -2px; }
</style>

tailwind

<div class="btn-group-tw btn-group-tw--solid inline-flex font-sans text-sm font-medium text-[#241430] rounded-lg overflow-hidden" role="group" aria-label="View as" style="--accent:#F5C2E0;">
  <button type="button" class="btn-group-btn-tw bg-[#FAF7F2] text-[#241430] px-4 py-2.5 cursor-pointer border-r border-[#24143020]" aria-pressed="true">List</button>
  <button type="button" class="btn-group-btn-tw bg-[#FAF7F2] text-[#241430] px-4 py-2.5 cursor-pointer" aria-pressed="false">Grid</button>
</div>
<style>
.btn-group-tw--outline { border: 1.5px solid #24143040; }
.btn-group-btn-tw[aria-pressed="true"] { background: #F5C2E0; }
.btn-group-btn-tw:hover { background: color-mix(in srgb, #F5C2E0 40%, #FAF7F2); }
.btn-group-btn-tw:focus-visible { outline: 2px solid #241430; outline-offset: -2px; }
</style>

react

export function ButtonGroupSelector({
  labelA = "List",
  labelB = "Grid",
  secondActive = false,
  variant = "solid",
  accent = "#F5C2E0",
}) {
  const btn = (active) => ({
    border: "none", background: active ? accent : "#FAF7F2", color: "#241430",
    padding: "9px 16px", cursor: "pointer", font: "500 14px system-ui, sans-serif",
  });
  return (
    <div role="group" aria-label="View as" style={{
      display: "inline-flex", borderRadius: 8, overflow: "hidden",
      border: variant === "outline" ? "1.5px solid #24143040" : "none",
    }}>
      <button type="button" aria-pressed={!secondActive} style={{ ...btn(!secondActive), borderRight: "1px solid #24143020" }}>{labelA}</button>
      <button type="button" aria-pressed={secondActive} style={btn(secondActive)}>{labelB}</button>
    </div>
  );
}