Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt

Use this file to discover all available pages before exploring further.

​
VBtnGroup

The VBtnGroup component wraps buttons in a unified container, applying consistent styling and eliminating gaps between buttons.

​
Basic Usage

<template>
  <VBtnGroup>
    <VBtn>One</VBtn>
    <VBtn>Two</VBtn>
    <VBtn>Three</VBtn>
  </VBtnGroup>
</template>

​
Variants

<VBtnGroup variant="elevated">
  <VBtn>One</VBtn>
  <VBtn>Two</VBtn>
  <VBtn>Three</VBtn>
</VBtnGroup>

​
Direction

<template>
  <!-- Horizontal (default) -->
  <VBtnGroup direction="horizontal">
    <VBtn>Left</VBtn>
    <VBtn>Center</VBtn>
    <VBtn>Right</VBtn>
  </VBtnGroup>
  
  <!-- Vertical -->
  <VBtnGroup direction="vertical">
    <VBtn>Top</VBtn>
    <VBtn>Middle</VBtn>
    <VBtn>Bottom</VBtn>
  </VBtnGroup>
</template>

​
Divided

<template>
  <VBtnGroup divided>
    <VBtn>One</VBtn>
    <VBtn>Two</VBtn>
    <VBtn>Three</VBtn>
  </VBtnGroup>
</template>

​
Props

​
variant
string
Visual style variant applied to all buttons. Options: elevated, flat, outlined, text, tonal, plain
​
color
string
Color applied to all buttons in the group
​
baseColor
string
Base color for all buttons when not active
​
direction
'horizontal' | 'vertical'
default:"horizontal"
Layout direction of the button group
​
divided
boolean
default:"false"
Adds dividers between buttons
​
density
string
Adjusts vertical spacing for all buttons. Options: default, comfortable, compact
​
elevation
string | number
Elevation level applied to the group (0-24)
​
rounded
string | number | boolean
Border radius for the group. Options: 0, xs, sm, md, lg, xl, pill, circle, or number
​
border
boolean | string | number
Adds border to the group. Can specify width or side
​
tag
string
default:"div"
HTML tag to use for root element
​
theme
string
Theme to apply to the component

​
Slots

​
default
slot
Button group content (VBtn components)

​
Examples

​
With Icons

<template>
  <VBtnGroup>
    <VBtn icon="mdi-format-align-left" />
    <VBtn icon="mdi-format-align-center" />
    <VBtn icon="mdi-format-align-right" />
    <VBtn icon="mdi-format-align-justify" />
  </VBtnGroup>
</template>

​
Colored Group

<template>
  <VBtnGroup color="primary" variant="outlined">
    <VBtn>Option A</VBtn>
    <VBtn>Option B</VBtn>
    <VBtn>Option C</VBtn>
  </VBtnGroup>
</template>

​
Elevated with Rounded Corners

<template>
  <VBtnGroup variant="elevated" rounded="lg" elevation="8">
    <VBtn>First</VBtn>
    <VBtn>Second</VBtn>
    <VBtn>Third</VBtn>
  </VBtnGroup>
</template>

​
Vertical Divided Group

<template>
  <VBtnGroup direction="vertical" divided variant="outlined">
    <VBtn prepend-icon="mdi-home">Home</VBtn>
    <VBtn prepend-icon="mdi-account">Profile</VBtn>
    <VBtn prepend-icon="mdi-cog">Settings</VBtn>
  </VBtnGroup>
</template>

​
Notes

  • The VBtnGroup component automatically applies flat: true to all child buttons by default
  • In horizontal mode, button heights are set to auto for consistent sizing
  • Child buttons inherit variant, color, and density from the parent group unless explicitly overridden

Build docs developers (and LLMs) love

Get started for freeTalk to us