Button Group

Recipe CSS

This is the exact CSS your kit ships for Button Group — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Button group ========================================================
 * A row of buttons fused into one control — shared edges, outer corners follow
 * the button's own radius (--btn-r, set per .btn). Use for split actions or a
 * segmented set of equal-weight buttons. Compose with any .btn variant/size. */
.btn-group { display: inline-flex; align-items: stretch; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn:first-child { border-top-left-radius: var(--btn-r); border-bottom-left-radius: var(--btn-r); }
.btn-group > .btn:last-child { border-top-right-radius: var(--btn-r); border-bottom-right-radius: var(--btn-r); }
/* Hovered / focused segment lifts above its neighbours so its full border + ring show. */
.btn-group > .btn:hover, .btn-group > .btn:focus-visible { position: relative; z-index: 1; }
/* Split button ("Save ▾") — deliberately NO dedicated class (H4 assessment):
 * a split IS a two-segment .btn-group — a label action + an icon chevron that
 * opens a .menu. The group already owns fused edges + per-segment focus; a
 * one-off .btn--split would duplicate that for zero new look. */
/* Connected group (H4 flourish) — the M3-Expressive "connected button group":
 * segments relax into pebbles with a hairline gap; INNER corners drop to the
 * small radius, OUTER corners keep the button radius (the base :first/:last
 * rules above already pin those). Reads softer than the fused default — pick
 * per product voice. Composes with .btn--toggle for the canonical
 * formatting / view-switch cluster. */
.btn-group--connected { gap: var(--k-s-2); }
.btn-group--connected > .btn {
  margin-left: 0;
  border-radius: min(var(--btn-r), var(--k-radius-sm, 6px));
}