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
Elevated
Flat
Outlined
Text
<VBtnGroup variant="elevated">
<VBtn>One</VBtn>
<VBtn>Two</VBtn>
<VBtn>Three</VBtn>
</VBtnGroup>
<VBtnGroup variant="flat">
<VBtn>One</VBtn>
<VBtn>Two</VBtn>
<VBtn>Three</VBtn>
</VBtnGroup>
<VBtnGroup variant="outlined">
<VBtn>One</VBtn>
<VBtn>Two</VBtn>
<VBtn>Three</VBtn>
</VBtnGroup>
<VBtnGroup variant="text">
<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>
Visual style variant applied to all buttons. Options: elevated, flat, outlined, text, tonal, plain
Color applied to all buttons in the group
Base color for all buttons when not active
direction
'horizontal' | 'vertical'
default:"horizontal"
Layout direction of the button group
Adds dividers between buttons
Adjusts vertical spacing for all buttons. Options: default, comfortable, compact
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
HTML tag to use for root element
Theme to apply to the component
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>
- 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