Components / Form & Input / Button Group
Button Group stable
Buttons joined into one piece: shared edges, one radius, no gaps. For toolbars, paging and split actions.
Uses: Button — include its CSS alongside this one.
<div style="display:flex;flex-direction:column;gap:14px;align-items:flex-start">
<div class="k-bgroup" role="group" aria-label="Pager">
<button class="btn btn-sec btn-md" type="button"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg> Prev</button>
<button class="btn btn-sec btn-md" type="button">Next <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
<div class="k-bgroup" role="group" aria-label="View">
<button class="btn btn-sec btn-md" type="button">Day</button>
<button class="btn btn-pri btn-md" type="button">Week</button>
<button class="btn btn-sec btn-md" type="button">Month</button>
</div>
</div>/* KATA Button Group — buttons sharing edges: the group owns the radius
and the seams, the Button part owns everything else. */
.k-bgroup{display:inline-flex;font-family:var(--k-font)}
.k-bgroup .btn{border-radius:0;margin-inline-start:-1px;position:relative}
.k-bgroup .btn:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-bgroup .btn:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-bgroup .btn:hover,.k-bgroup .btn:focus-visible{z-index:1}
.k-bgroup.vert{flex-direction:column}
.k-bgroup.vert .btn{margin-inline-start:0;margin-top:-1px}
.k-bgroup.vert .btn:first-child{border-radius:var(--k-radius) var(--k-radius) 0 0;margin-top:0}
.k-bgroup.vert .btn:last-child{border-radius:0 0 var(--k-radius) var(--k-radius)}
Installation
CLI
node kata-ui.mjs add button-group
Writes the part’s CSS into your project. Dependencies are resolved and written with it. New to the CLI? See the CLI doc.
Manual
- Load
tokens.cssonce, before any part. - Copy the CSS tab into your stylesheet.
- Copy the HTML where it belongs.
Examples
Split action
<div class="k-bgroup" role="group" aria-label="Save"> <button class="btn btn-pri btn-md" type="button">Save changes</button> <button class="btn btn-pri btn-md" type="button" aria-label="More save options"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button> </div>
Vertical
<div class="k-bgroup vert" role="group" aria-label="Insert"> <button class="btn btn-sec btn-md" type="button">Above</button> <button class="btn btn-sec btn-md" type="button">Below</button> <button class="btn btn-sec btn-md" type="button">Duplicate</button> </div>
Usage
Group one size and one weight at a time — the group owns the outer radius and the shared borders, the buttons keep their own colors. A split action is a group of two: the action, then the chevron.
Accessibility
Plain buttons in a row; wrap the group in a labelled container (role="group" with an aria-label) when the grouping itself carries meaning, and keep the tab order left to right.
Anatomy
The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.
.k-bgroup | class |
.btn | class |
.vert | class |
aria-label | ARIA |
aria-hidden | ARIA |
Related parts
Button stable
Black leads; lines and ghosts support. Hover, disabled and loading states included.
Calendar stable
One month, standing on its own: a grid of real day buttons with today marked and a selection you can move.
Cascader beta
A select that walks a tree: pick a branch, then a branch of the branch, until the leaf is the answer.
Checkbox / Radio stable
Native inputs with a restyled face. Keyboard support and form behavior stay intact.