Button Group

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

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