Button group

Keeps related actions together as joined ghost buttons with 1px dividers.

Preview

In action

Align

Proof desk

Flush actions. The group is one object, not three buttons.

When to use

Use it for

Two to four related actions that read as one control.
Ghost buttons; the group owns the outer stroke and the seams.

Not for

Exclusive selection; use ToggleGroup, which tracks the pressed option.
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

Depends on

/button