Align
Proof desk
Flush actions. The group is one object, not three buttons.
Button group
Keeps related actions together as joined buttons with 1px dividers and one outer frame.
Preview
In action
When to use
Use it for
- Two to four related actions that read as one control.
- Ghost or subtle buttons; the group owns the outer stroke and the seams.
- For application-owned selection, give each subtle Button aria-pressed and update the selection from its onClick handler.
Not for
- Expecting the group to manage selection automatically; use ToggleGroup when it should own that behavior.
- Unrelated actions in one row; space them instead.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Button, ButtonGroup } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/button-group.
2. Vendor the source
npx @noorddev/vlak-cli add button-group
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/button-group.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Button, ButtonGroup } from "@noorddev/vlak-react";
<ButtonGroup aria-label="Alignment">
<Button variant="ghost">Left</Button>
<Button variant="ghost">Center</Button>
<Button variant="ghost">Right</Button>
</ButtonGroup>Props
ButtonGroup
Flush joined actions. One hairline between. Group owns the outer stroke.
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between the buttons |
| Enter, Space | Activates the focused button |
Accessibility
- Renders role="group"; pass aria-label to name it.
- Children get grouped, so each Button keeps its own name and focus ring.
Markup
<div class="rs-btn-group"><button class="rs-btn-ghost">Left</button><button class="rs-btn-ghost">Center</button><button class="rs-btn-ghost">Right</button></div>
Classes
.rs-btn-group