feat(VBtn): add new readonly prop

packages/api-generator/src/locale/en/VBtn.json

@@ -4,6 +4,7 @@
     "flat": "Removes the button box shadow. This is different than using the 'flat' variant.",
     "icon": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.",
     "plain": "Removes the default background change applied when hovering over the button.",
+    "readonly": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.",
     "stacked": "Displays the button as a flex-column.",
     "slim": "Reduces padding to 0 8px."
   },

packages/docs/src/examples/v-btn/misc-readonly.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-list-item
+    base-color="surface-light"
+    border="opacity-50 md"
+    lines="two"
+    max-width="796"
+    prepend-avatar="https://cdn.vuetifyjs.com/docs/images/one/logos/one.png"
+    rounded="lg"
+    variant="flat"
+  >
+    <v-list-item-title>
+      <span class="text-h6">Vuetify One Subscriber</span>
+    </v-list-item-title>
+
+    <v-list-item-subtitle :opacity="isSubscriber ? .8 : undefined">
+      <v-scroll-y-reverse-transition mode="out-in">
+        <div
+          v-if="isSubscriber"
+          key="subscribed"
+          class="text-success text-caption"
+        >
+          <v-icon icon="mdi-medal" size="1em"></v-icon>
+          $2.99 /month
+        </div>
+
+        <div
+          v-else
+          key="not-subscribed"
+          class="text-caption"
+        >
+          Support Vuetify by becoming a Subscriber
+        </div>
+      </v-scroll-y-reverse-transition>
+    </v-list-item-subtitle>
+
+    <template v-slot:append>
+      <v-fade-transition mode="out-in">
+        <v-btn
+          :key="`subscribe-${isSubscriber}`"
+          :border="`thin ${isSubscriber ? 'error' : 'success'}`"
+          :color="isSubscriber ? 'error' : 'success'"
+          :prepend-icon="isSubscriber ? 'mdi-close' : 'mdi-email'"
+          :slim="isSubscriber"
+          :text="isSubscriber ? 'Cancel' : 'Subscribe'"
+          :variant="isSubscriber ? 'plain' : 'tonal'"
+          class="me-2 text-none"
+          size="small"
+          flat
+          @click="isSubscriber = !isSubscriber"
+        ></v-btn>
+      </v-fade-transition>
+
+      <v-fade-transition mode="out-in">
+        <v-btn
+          :key="`info-${isSubscriber}`"
+          :color="isSubscriber ? 'success' : 'primary'"
+          :prepend-icon="isSubscriber ? 'mdi-check' : 'mdi-open-in-new'"
+          :readonly="isSubscriber"
+          :text="isSubscriber ? 'Subscribed' : 'More Info'"
+          class="text-none"
+          size="small"
+          variant="flat"
+          flat
+        ></v-btn>
+      </v-fade-transition>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const isSubscriber = shallowRef(false)
+</script>

packages/docs/src/pages/en/components/buttons.md

@@ -203,6 +203,12 @@ In this example we use a [v-banner](/components/banners/) component to display a
 
 <ExamplesExample file="v-btn/misc-cookie-settings" />
 
+### Readonly buttons
+
+In this example, we change the properties of the `v-btn` based upon a "subscription" state. When the user is subscribed, we want to disable interaction with the button, but not change its appearance; which is what occurs when using the **disabled** property.
+
+<ExamplesExample file="v-btn/misc-readonly" />
+
 ## Global Configuration
 
 Modify the default values and set a default style for all `v-btn` components using the [Global configuration](/features/global-configuration/). This helps keep your application consistent and allows you to change it in the future with minimal effort.

packages/docs/src/plugins/icons.ts

@@ -242,6 +242,7 @@ export {
   mdiMapMarkerOff,
   mdiMapMarkerOutline,
   mdiMaterialDesign,
+  mdiMedal,
   mdiMenu,
   mdiMenuDown,
   mdiMenuLeft,

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -148,6 +148,9 @@
     &--slim
       padding: $button-slim-padding
 
+    &--readonly
+      pointer-events: none
+
     &--rounded
       @include tools.rounded($button-rounded-border-radius)
 

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -60,6 +60,7 @@ export const makeVBtnProps = propsFactory({
   appendIcon: IconValue,
 
   block: Boolean,
+  readonly: Boolean,
   slim: Boolean,
   stacked: Boolean,
 
@@ -184,6 +185,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
               'v-btn--flat': props.flat,
               'v-btn--icon': !!props.icon,
               'v-btn--loading': props.loading,
+              'v-btn--readonly': props.readonly,
               'v-btn--slim': props.slim,
               'v-btn--stacked': props.stacked,
             },
@@ -209,7 +211,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
           aria-busy={ props.loading ? true : undefined }
           disabled={ isDisabled.value || undefined }
           href={ link.href.value }
-          tabindex={ props.loading ? -1 : undefined }
+          tabindex={ props.loading || props.readonly ? -1 : undefined }
           onClick={ onClick }
           value={ valueAttr.value }
         >