Button group — Forms

Button Groups

Cluster related buttons so they share edges and read as a single control — horizontal or vertical, in three sizes, and optionally full-width.

VdButtonGroup component (Vue 3)

<VdButtonGroup> wraps <VdButton> children and applies the group layout through the size, vertical, and full-width props.

Horizontal (default)

Vertical

Full width · large

Usage

<script setup lang="ts">
import { VdButtonGroup, VdButton } from "@vanduo-oss/vd3";
</script>

<template>
  <VdButtonGroup size="md">
    <VdButton variant="primary">Left</VdButton>
    <VdButton variant="primary">Middle</VdButton>
    <VdButton variant="primary">Right</VdButton>
  </VdButtonGroup>

  <!-- vertical stack, full-width, large -->
  <VdButtonGroup vertical full-width size="lg">
    <VdButton variant="secondary">A</VdButton>
    <VdButton variant="secondary">B</VdButton>
  </VdButtonGroup>
</template>

Component API (Vue 3)

Prop / slot	Description
`:size`	'sm' \| 'md' \| 'lg' — sizes every button in the group (default 'md').
`:vertical`	Stacks the buttons vertically (adds .vd-btn-group-vertical).
`:full-width`	Stretches the group to 100% width (adds .vd-btn-group-full).
`default slot`	The VdButton (or .vd-btn) children to group.

The raw .vd-btn-group classes below ship in vd3's CSS and back the same layout for non-Vue markup.

Horizontal Group

Full width (.vd-btn-group-full):

<!-- Horizontal Button Group -->
<div class="vd-btn-group">
  <button class="vd-btn vd-btn-primary">Left</button>
  <button class="vd-btn vd-btn-primary">Middle</button>
  <button class="vd-btn vd-btn-primary">Right</button>
</div>

<!-- Outline Buttons with Active State -->
<div class="vd-btn-group">
  <button class="vd-btn vd-btn-outline">One</button>
  <button class="vd-btn vd-btn-outline is-active">Two</button>
  <button class="vd-btn vd-btn-outline">Three</button>
</div>

<!-- Full Width Button Group -->
<div class="vd-btn-group vd-btn-group-full">
  <button class="vd-btn vd-btn-secondary">A</button>
  <button class="vd-btn vd-btn-secondary">B</button>
  <button class="vd-btn vd-btn-secondary">C</button>
</div>

Vertical Group & Sizes

Small group (.vd-btn-group-sm):

Large group (.vd-btn-group-lg):

<!-- Vertical Button Group -->
<div class="vd-btn-group-vertical">
  <button class="vd-btn vd-btn-primary">Top</button>
  <button class="vd-btn vd-btn-primary">Middle</button>
  <button class="vd-btn vd-btn-primary">Bottom</button>
</div>

<!-- Small Button Group -->
<div class="vd-btn-group vd-btn-group-sm">
  <button class="vd-btn vd-btn-outline">S1</button>
  <button class="vd-btn vd-btn-outline">S2</button>
  <button class="vd-btn vd-btn-outline">S3</button>
</div>

<!-- Large Button Group -->
<div class="vd-btn-group vd-btn-group-lg">
  <button class="vd-btn vd-btn-outline">L1</button>
  <button class="vd-btn vd-btn-outline">L2</button>
  <button class="vd-btn vd-btn-outline">L3</button>
</div>

API Reference

Class Name	Description	Type
`.vd-btn-group`	Base container for grouping buttons horizontally and removing inner border-radii.	Layout
`.vd-btn-group-vertical`	Base container for grouping buttons vertically.	Layout
`.vd-btn-group-full`	Makes the horizontal button group stretch to 100% of its container width.	Utility
`.vd-btn-group-sm`	Applies small sizing to all buttons within the group.	Modifier
`.vd-btn-group-lg`	Applies large sizing to all buttons within the group.	Modifier