Button-Gruppe 1.2.0

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

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Visually group related actions with .velin-btn-group (and toolbars with .velin-btn-toolbar).
Wenn mehrere Buttons einen Aufgaben-Kontext teilen und als ein Steuerungscluster wahrgenommen werden sollen.

Wann nicht verwenden

Ein einzelner primaerer CTA: verwende einen einzelnen Button.
Exklusive Ansichts-/Moduswechsel: bevorzuge Segmented Control.

Einfaches Beispiel

<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>

Groessen

Wende Button-Groessenklassen auf jeden Button innerhalb der Gruppe an.

<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>

Barrierefreiheit

Add role="group" and aria-label to .velin-btn-group.
Verwende role="toolbar" und aria-label auf .velin-btn-toolbar.

CSS-Variablen

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