@vuetify/nightly 3.8.1-next.2025-04-18 → 3.8.2-dev.2025-04-28

package/lib/components/VBtn/VBtn.sass

@@ -9,8 +9,9 @@
   .v-btn
     align-items: center
     border-radius: $button-border-radius
-    display: inline-flex
-    flex-direction: row
+    display: inline-grid
+    grid-template-areas: "prepend content append"
+    grid-template-columns: max-content auto max-content
     font-weight: $button-font-weight
     justify-content: center
     letter-spacing: $button-text-letter-spacing
@@ -87,8 +88,9 @@
           opacity: $button-disabled-opacity
       @else
         opacity: 1
-        @include tools.layer('trumps')
-          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
+        &.v-btn
+          // specificity has to be higher to override theme !important
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
 
       &.v-btn--variant-elevated,
       &.v-btn--variant-flat
@@ -99,8 +101,7 @@
           color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
           background: rgb(var(--v-theme-surface))
         @else
-          @include tools.layer('trumps')
-            background: rgb(var(--v-theme-surface))
+          background: rgb(var(--v-theme-surface)) !important
 
         .v-btn__overlay
           // __overlay uses currentColor, so we need to divide
@@ -116,10 +117,11 @@
         opacity: 0
 
     &--stacked
-      align-items: center
-      flex-direction: column
-      justify-content: center
-      gap: $button-stacked-gap
+      grid-template-areas: "prepend" "content" "append"
+      grid-template-columns: auto
+      grid-template-rows: max-content max-content max-content
+      justify-items: center
+      align-content: center
 
       .v-btn__content
         flex-direction: column
@@ -131,6 +133,14 @@
       .v-btn__content > .v-icon--end
         margin-inline: 0
 
+      .v-btn__prepend,
+      .v-btn__content > .v-icon--start
+        margin-bottom: $button-stacked-icon-margin
+
+      .v-btn__append,
+      .v-btn__content > .v-icon--end
+        margin-top: $button-stacked-icon-margin
+
       @at-root
         @include button-sizes($button-stacked-sizes, true)
         @include button-density('height', $button-stacked-density)
@@ -183,18 +193,21 @@
     transition: $button-content-transition
 
   .v-btn__prepend
+    grid-area: prepend
     margin-inline: $button-margin-start $button-margin-end
 
     .v-btn--slim &
       margin-inline-start: 0
 
   .v-btn__append
+    grid-area: append
     margin-inline: $button-margin-end $button-margin-start
 
     .v-btn--slim &
       margin-inline-end: 0
 
   .v-btn__content
+    grid-area: content
     justify-content: center
     white-space: $button-white-space
 

package/lib/components/VBtn/_variables.scss

@@ -27,7 +27,7 @@ $button-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !d
 $button-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default;
 $button-height: 36px !default;
 $button-stacked-height: 72px !default;
-$button-stacked-gap: 4px !default;
+$button-stacked-icon-margin: 4px !default;
 $button-icon-border-radius: map.get(settings.$rounded, 'circle') !default;
 $button-icon-font-size: 1rem !default;
 $button-line-height: normal !default;

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -1,64 +1,88 @@
-@layer vuetify.components {
-  .v-btn-group {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    vertical-align: middle;
-  }
-  .v-btn-group {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    border-style: solid;
-    border-width: 0;
-  }
-  .v-btn-group--border {
-    border-width: thin;
-    box-shadow: none;
-  }
-  .v-btn-group {
-    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-btn-group {
-    border-radius: 4px;
-  }
-  .v-btn-group {
-    background: transparent;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-btn-group--density-default.v-btn-group {
-    height: 48px;
-  }
-  .v-btn-group--density-comfortable.v-btn-group {
-    height: 40px;
-  }
-  .v-btn-group--density-compact.v-btn-group {
-    height: 36px;
-  }
-  .v-btn-group .v-btn {
-    border-radius: 0;
-    border-color: inherit;
-  }
-  .v-btn-group .v-btn:not(:last-child) {
-    border-inline-end: none;
-  }
-  .v-btn-group .v-btn:not(:first-child) {
-    border-inline-start: none;
-  }
-  .v-btn-group .v-btn:first-child {
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
-  }
-  .v-btn-group .v-btn:last-child {
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-  .v-btn-group--divided .v-btn:not(:last-child) {
-    border-inline-end-width: thin;
-    border-inline-end-style: solid;
-    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-btn-group--tile {
-    border-radius: 0;
-  }
+.v-btn-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.v-btn-group {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+}
+.v-btn-group--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-btn-group {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-btn-group {
+  border-radius: 4px;
+}
+.v-btn-group {
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-btn-group--density-default.v-btn-group {
+  height: 48px;
+}
+
+.v-btn-group--density-comfortable.v-btn-group {
+  height: 40px;
+}
+
+.v-btn-group--density-compact.v-btn-group {
+  height: 36px;
+}
+
+.v-btn-group .v-btn {
+  border-radius: 0;
+  border-color: inherit;
+}
+.v-btn-group--tile {
+  border-radius: 0;
+}
+.v-btn-group--horizontal .v-btn:not(:last-child) {
+  border-inline-end: none;
+}
+.v-btn-group--horizontal .v-btn:not(:first-child) {
+  border-inline-start: none;
+}
+.v-btn-group--horizontal .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+.v-btn-group--horizontal .v-btn:last-child {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.v-btn-group--horizontal.v-btn-group--divided .v-btn:not(:last-child) {
+  border-inline-end-width: thin;
+  border-inline-end-style: solid;
+  border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-btn-group--vertical {
+  flex-direction: column;
+  height: auto !important;
+}
+.v-btn-group--vertical .v-btn:not(:last-child) {
+  border-block-end: none;
+}
+.v-btn-group--vertical .v-btn:not(:first-child) {
+  border-block-start: none;
+}
+.v-btn-group--vertical .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+.v-btn-group--vertical .v-btn:last-child {
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.v-btn-group--vertical.v-btn-group--divided .v-btn:not(:last-child) {
+  border-block-end-width: thin;
+  border-block-end-style: solid;
+  border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
 }

package/lib/components/VBtnGroup/VBtnGroup.d.ts

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue';
 export declare const makeVBtnGroupProps: <Defaults extends {
     color?: unknown;
     variant?: unknown;
@@ -12,35 +13,36 @@ export declare const makeVBtnGroupProps: <Defaults extends {
     border?: unknown;
     baseColor?: unknown;
     divided?: unknown;
+    direction?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     color: unknown extends Defaults["color"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
+        type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
         default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
     };
     variant: unknown extends Defaults["variant"] ? {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     } : Omit<{
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | Defaults["variant"]>;
+        type: PropType<unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | Defaults["variant"]>;
         default: unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | Defaults["variant"];
     };
     theme: unknown extends Defaults["theme"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
+        type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
         default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
     };
     tag: unknown extends Defaults["tag"] ? {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     } : Omit<{
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
+        type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
         default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : NonNullable<string | import("../../util/index.js").JSXComponent> | Defaults["tag"];
     };
     rounded: unknown extends Defaults["rounded"] ? {
@@ -50,11 +52,11 @@ export declare const makeVBtnGroupProps: <Defaults extends {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
+        type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
         default: unknown extends Defaults["rounded"] ? string | number | boolean : NonNullable<string | number | boolean> | Defaults["rounded"];
     };
     tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
+        type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
         default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
     };
     elevation: unknown extends Defaults["elevation"] ? {
@@ -64,51 +66,62 @@ export declare const makeVBtnGroupProps: <Defaults extends {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
+        type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
         default: unknown extends Defaults["elevation"] ? string | number : NonNullable<string | number> | Defaults["elevation"];
     };
     density: unknown extends Defaults["density"] ? {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     } : Omit<{
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
+        type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
         default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : NonNullable<import("../../composables/density.js").Density> | Defaults["density"];
     };
-    class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
-        type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
+    class: unknown extends Defaults["class"] ? PropType<any> : {
+        type: PropType<unknown extends Defaults["class"] ? any : any>;
         default: unknown extends Defaults["class"] ? any : any;
     };
     style: unknown extends Defaults["style"] ? {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     } : Omit<{
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
+        type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
         default: unknown extends Defaults["style"] ? import("vue").StyleValue : NonNullable<import("vue").StyleValue> | Defaults["style"];
     };
     border: unknown extends Defaults["border"] ? (StringConstructor | BooleanConstructor | NumberConstructor)[] : {
-        type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
+        type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
         default: unknown extends Defaults["border"] ? string | number | boolean : NonNullable<string | number | boolean> | Defaults["border"];
     };
     baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
+        type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
         default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
     };
     divided: unknown extends Defaults["divided"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
+        type: PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
         default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
     };
+    direction: unknown extends Defaults["direction"] ? {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    } : Omit<{
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
+        default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
+    };
 };
 export declare const VBtnGroup: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -133,6 +146,7 @@ export declare const VBtnGroup: {
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -150,6 +164,7 @@ export declare const VBtnGroup: {
         Defaults: {};
     }, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -174,6 +189,7 @@ export declare const VBtnGroup: {
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     }, {}, {}, {}, {}, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -186,6 +202,7 @@ export declare const VBtnGroup: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<{
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
@@ -210,6 +227,7 @@ export declare const VBtnGroup: {
     "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
 }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
@@ -221,13 +239,13 @@ export declare const VBtnGroup: {
 }>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
     color: StringConstructor;
     variant: {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     };
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     rounded: {
@@ -240,28 +258,32 @@ export declare const VBtnGroup: {
         validator(v: any): boolean;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }, import("vue").ExtractPropTypes<{
     color: StringConstructor;
     variant: {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     };
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     rounded: {
@@ -274,17 +296,21 @@ export declare const VBtnGroup: {
         validator(v: any): boolean;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }>>;
 export type VBtnGroup = InstanceType<typeof VBtnGroup>;

package/lib/components/VBtnGroup/VBtnGroup.js

@@ -13,10 +13,14 @@ import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js";
 import { makeVariantProps } from "../../composables/variant.js"; // Utilities
 import { toRef } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.js";
+import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -50,7 +54,7 @@ export const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: 'auto',
+        height: props.direction === 'horizontal' ? 'auto' : null,
         baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         density: toRef(props, 'density'),
@@ -60,7 +64,7 @@ export const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return _createVNode(props.tag, {
-        "class": ['v-btn-group', {
+        "class": ['v-btn-group', `v-btn-group--${props.direction}`, {
           'v-btn-group--divided': props.divided
         }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": props.style

package/lib/components/VBtnGroup/VBtnGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnGroup.js","names":["makeBorderProps","useBorder","makeComponentProps","provideDefaults","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVBtnGroupProps","baseColor","String","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVBtnGroupProps = propsFactory({\n  baseColor: String,\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'VBtnGroup')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        baseColor: toRef(props, 'baseColor'),\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,SAAS,EAAEC,MAAM;EACjBC,OAAO,EAAEC,OAAO;EAEhB,GAAGtB,eAAe,CAAC,CAAC;EACpB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC,CAAC;EACnB,GAAGE,gBAAgB,CAAC;AACtB,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMU,SAAS,GAAGR,gBAAgB,CAAC,CAAC,CAAC;EAC1CS,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEP,kBAAkB,CAAC,CAAC;EAE3BQ,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGjB,YAAY,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGzB,UAAU,CAACoB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG9B,SAAS,CAACwB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGzB,YAAY,CAACkB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGxB,UAAU,CAACgB,KAAK,CAAC;IAE5CtB,eAAe,CAAC;MACd+B,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdhB,SAAS,EAAEL,KAAK,CAACW,KAAK,EAAE,WAAW,CAAC;QACpCW,KAAK,EAAEtB,KAAK,CAACW,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAEvB,KAAK,CAACW,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEzB,KAAK,CAACW,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFR,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEhB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK,EACpBjB,KAAK,CAACkB,KAAK,CACZ;QAAA,SACOlB,KAAK,CAACmB;MAAK,GACThB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VBtnGroup.js","names":["makeBorderProps","useBorder","makeComponentProps","provideDefaults","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVBtnGroupProps","baseColor","String","divided","Boolean","direction","type","default","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  baseColor: String,\n  divided: Boolean,\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'VBtnGroup')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: props.direction === 'horizontal' ? 'auto' : null,\n        baseColor: toRef(props, 'baseColor'),\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            `v-btn-group--${props.direction}`,\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,SAAS,EAAEC,MAAM;EACjBC,OAAO,EAAEC,OAAO;EAChBC,SAAS,EAAE;IACTC,IAAI,EAAEJ,MAA6C;IACnDK,OAAO,EAAE;EACX,CAAC;EAED,GAAGzB,eAAe,CAAC,CAAC;EACpB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC,CAAC;EACnB,GAAGE,gBAAgB,CAAC;AACtB,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMa,SAAS,GAAGX,gBAAgB,CAAC,CAAC,CAAC;EAC1CY,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEV,kBAAkB,CAAC,CAAC;EAE3BW,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGpB,YAAY,CAACgB,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAG5B,UAAU,CAACuB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAGjC,SAAS,CAAC2B,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAG5B,YAAY,CAACqB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAG3B,UAAU,CAACmB,KAAK,CAAC;IAE5CzB,eAAe,CAAC;MACdkC,IAAI,EAAE;QACJC,MAAM,EAAEV,KAAK,CAACL,SAAS,KAAK,YAAY,GAAG,MAAM,GAAG,IAAI;QACxDJ,SAAS,EAAEL,KAAK,CAACc,KAAK,EAAE,WAAW,CAAC;QACpCW,KAAK,EAAEzB,KAAK,CAACc,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAE1B,KAAK,CAACc,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAE5B,KAAK,CAACc,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFX,SAAS,CAAC,MAAM;MACd,OAAA0B,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb,gBAAgBhB,KAAK,CAACL,SAAS,EAAE,EACjC;UACE,sBAAsB,EAAEK,KAAK,CAACP;QAChC,CAAC,EACDW,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK,EACpBjB,KAAK,CAACkB,KAAK,CACZ;QAAA,SACOlB,KAAK,CAACmB;MAAK,GACThB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VBtnGroup/VBtnGroup.sass

@@ -28,25 +28,52 @@
       border-radius: 0
       border-color: inherit
 
-      &:not(:last-child)
-        border-inline-end: none
+    &--tile
+      @include tools.rounded($btn-group-tile-border-radius)
 
-      &:not(:first-child)
-        border-inline-start: none
+    &--horizontal
+      .v-btn
+        &:not(:last-child)
+          border-inline-end: none
 
-      &:first-child
-        border-start-start-radius: inherit
-        border-end-start-radius: inherit
+        &:not(:first-child)
+          border-inline-start: none
 
-      &:last-child
-        border-start-end-radius: inherit
-        border-end-end-radius: inherit
+        &:first-child
+          border-start-start-radius: inherit
+          border-end-start-radius: inherit
 
-    &--divided
-      .v-btn:not(:last-child)
-        border-inline-end-width: $btn-group-border-thin-width
-        border-inline-end-style: $btn-group-border-style
-        border-inline-end-color: $btn-group-border-color
+        &:last-child
+          border-start-end-radius: inherit
+          border-end-end-radius: inherit
 
-    &--tile
-      @include tools.rounded($btn-group-tile-border-radius)
+      &.v-btn-group--divided
+        .v-btn:not(:last-child)
+          border-inline-end-width: $btn-group-border-thin-width
+          border-inline-end-style: $btn-group-border-style
+          border-inline-end-color: $btn-group-border-color
+
+    &--vertical
+      flex-direction: column
+      height: auto !important
+
+      .v-btn
+        &:not(:last-child)
+          border-block-end: none
+
+        &:not(:first-child)
+          border-block-start: none
+
+        &:first-child
+          border-start-start-radius: inherit
+          border-start-end-radius: inherit
+
+        &:last-child
+          border-end-start-radius: inherit
+          border-end-end-radius: inherit
+
+      &.v-btn-group--divided
+        .v-btn:not(:last-child)
+          border-block-end-width: $btn-group-border-thin-width
+          border-block-end-style: $btn-group-border-style
+          border-block-end-color: $btn-group-border-color