@vuetify/nightly 3.9.0-master.2025-07-08 → 3.9.0-next.2025-07-09

package/lib/components/VBtn/VBtn.sass

@@ -10,9 +10,8 @@
   .v-btn
     align-items: center
     border-radius: $button-border-radius
-    display: inline-grid
-    grid-template-areas: "prepend content append"
-    grid-template-columns: max-content auto max-content
+    display: inline-flex
+    flex-direction: row
     font-weight: $button-font-weight
     justify-content: center
     letter-spacing: $button-text-letter-spacing
@@ -93,9 +92,8 @@
           opacity: $button-disabled-opacity
       @else
         opacity: 1
-        &.v-btn
-          // specificity has to be higher to override theme !important
-          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
+        @include tools.layer('trumps')
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
 
       &.v-btn--variant-elevated,
       &.v-btn--variant-flat
@@ -106,7 +104,8 @@
           color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
           background: rgb(var(--v-theme-surface))
         @else
-          background: rgb(var(--v-theme-surface)) !important
+          @include tools.layer('trumps')
+            background: rgb(var(--v-theme-surface))
 
         .v-btn__overlay
           // __overlay uses currentColor, so we need to divide
@@ -122,11 +121,10 @@
         opacity: 0
 
     &--stacked
-      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
+      align-items: center
+      flex-direction: column
+      justify-content: center
+      gap: $button-stacked-gap
 
       .v-btn__content
         flex-direction: column
@@ -138,14 +136,6 @@
       .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)
@@ -198,21 +188,18 @@
     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

@@ -28,7 +28,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-icon-margin: 4px !default;
+$button-stacked-gap: 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,89 +1,88 @@
-.v-btn-group {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  min-width: 0;
-  overflow-y: hidden;
-  overflow-x: auto;
-  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));
+@layer vuetify.components {
+  .v-btn-group {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 0;
+    overflow-y: hidden;
+    overflow-x: auto;
+    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/VBtnToggle/VBtnToggle.css

@@ -1,17 +1,19 @@
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
-  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
-}
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
-  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-}
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
-  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-}
-@supports not selector(:focus-visible) {
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
+@layer vuetify.components {
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
+    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
+  }
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
+    opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
     opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
-}
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
-  opacity: 1;
+  @supports not selector(:focus-visible) {
+    .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
+      opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+    }
+  }
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
+    opacity: 1;
+  }
 }