Button Group 1.2.2

Combine related buttons into a single visual unit with .velin-btn-group, or arrange multiple groups with .velin-btn-toolbar. Deutsch: Button Gruppe

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Visually group related actions with .velin-btn-group (and toolbars with .velin-btn-toolbar).
When several buttons share one task context and should read as a single control cluster.

When not

A single primary CTA — use a lone Button.
Exclusive view/mode toggles — prefer Segmented control.

Basic Example

<div class="velin-btn-group" role="group" aria-label="Basic example">
  <button class="velin-btn velin-btn--outline">Left</button>
  <button class="velin-btn velin-btn--outline">Middle</button>
  <button class="velin-btn velin-btn--outline">Right</button>
</div>

<div class="velin-btn-toolbar" role="toolbar" aria-label="Toolbar">
  <div class="velin-btn-group" role="group" aria-label="First group">
    <button class="velin-btn velin-btn--primary">1</button>
    <button class="velin-btn velin-btn--primary">2</button>
    <button class="velin-btn velin-btn--primary">3</button>
  </div>
  <div class="velin-btn-group" role="group" aria-label="Second group">
    <button class="velin-btn velin-btn--outline">A</button>
    <button class="velin-btn velin-btn--outline">B</button>
  </div>
</div>

Sizes

Apply button size classes to each button inside the group.

<div class="velin-btn-group" role="group">
  <button class="velin-btn velin-btn--outline velin-btn--sm">S</button>
  <button class="velin-btn velin-btn--outline velin-btn--sm">M</button>
</div>

Accessibility

Add role="group" and aria-label to .velin-btn-group.
Use role="toolbar" and aria-label on .velin-btn-toolbar.

CSS Variables

Variable	Description
`--velin-color-border`	Divider line between grouped buttons
`--velin-radius-md`	Outer border radius (first/last child)
`--velin-space-2`	Toolbar gap between groups