Button Group

Related buttons grouped together.

html

<div class="btn-grp btn-grp--horizontal" role="group" aria-label="View" style="--bg:#241430;border-radius:10px">
  <button type="button" class="btn-grp__item" aria-pressed="true">List</button>
  <button type="button" class="btn-grp__item" aria-pressed="false">Grid</button>
</div>
<style>
.btn-grp { display: inline-flex; border: 2px solid var(--bg); overflow: hidden; }
.btn-grp--vertical { flex-direction: column; }
.btn-grp__item {
  font: 600 14px/1 system-ui, sans-serif;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn-grp--horizontal .btn-grp__item + .btn-grp__item { border-left: 2px solid var(--bg); }
.btn-grp--vertical .btn-grp__item + .btn-grp__item { border-top: 2px solid var(--bg); }
.btn-grp__item[aria-pressed="true"] { background: var(--bg); color: #FAF7F2; }
.btn-grp__item:hover:not([aria-pressed="true"]) { background: rgba(36,20,48,.08); }
.btn-grp__item:focus-visible { outline:2px solid #241430;outline-offset:2px; position: relative; z-index: 1; }
</style>

tailwind

<div class="inline-flex overflow-hidden btn-grp-tw btn-grp-tw--horizontal" role="group" aria-label="View" style="border:2px solid #241430;border-radius:10px">
  <button type="button" class="px-4.5 py-2.5 text-sm font-semibold bg-transparent cursor-pointer btn-grp-tw__item" style="color:#241430" aria-pressed="true">List</button>
  <button type="button" class="px-4.5 py-2.5 text-sm font-semibold bg-transparent cursor-pointer btn-grp-tw__item" style="color:#241430" aria-pressed="false">Grid</button>
</div>
<style>
.btn-grp-tw--vertical { flex-direction: column; }
.btn-grp-tw--horizontal .btn-grp-tw__item + .btn-grp-tw__item { border-left: 2px solid #241430; }
.btn-grp-tw--vertical .btn-grp-tw__item + .btn-grp-tw__item { border-top: 2px solid #241430; }
.btn-grp-tw__item[aria-pressed="true"] { background: #241430; color: #FAF7F2; }
.btn-grp-tw__item:hover:not([aria-pressed="true"]) { background: rgba(36,20,48,.08); }
.btn-grp-tw__item:focus-visible { outline:2px solid #241430;outline-offset:2px; position: relative; z-index: 1; }
</style>

react

export function ButtonGroup({
  groupLabel = "View",
  active = false,
  orientation = "horizontal",
  bg = "#241430",
  radius = 10,
}) {
  const itemStyle = (pressed) => ({
    padding: "10px 18px",
    border: "none",
    background: pressed ? bg : "transparent",
    color: pressed ? "#FAF7F2" : bg,
    font: "600 14px/1 system-ui, sans-serif",
    cursor: "pointer",
  });
  return (
    <div
      role="group"
      aria-label={groupLabel}
      style={{
        display: "inline-flex",
        flexDirection: orientation === "vertical" ? "column" : "row",
        border: `2px solid ${bg}`,
        borderRadius: radius,
        overflow: "hidden",
      }}
    >
      <button type="button" aria-pressed={!active} style={itemStyle(!active)}>List</button>
      <button type="button" aria-pressed={active} style={itemStyle(active)}>Grid</button>
    </div>
  );
}