diff --git a/packages/api-generator/src/locale/en/VBtn.json b/packages/api-generator/src/locale/en/VBtn.json
index 4b1b7db3bf8..196ab42b0ec 100644
--- a/packages/api-generator/src/locale/en/VBtn.json
+++ b/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."
},
diff --git a/packages/docs/src/examples/v-btn/misc-readonly.vue b/packages/docs/src/examples/v-btn/misc-readonly.vue
new file mode 100644
index 00000000000..7b3b897c215
--- /dev/null
+++ b/packages/docs/src/examples/v-btn/misc-readonly.vue
@@ -0,0 +1,74 @@
+
+
+
+ Vuetify One Subscriber
+
+
+
+
+
+
+ $2.99 /month
+
+
+
+ Support Vuetify by becoming a Subscriber
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
index 817d97cc3bd..0b8e586a2f0 100644
--- a/packages/docs/src/pages/en/components/buttons.md
+++ b/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
+### 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.
+
+
+
## 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.
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index 18f53826e17..10ede5a498f 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -242,6 +242,7 @@ export {
mdiMapMarkerOff,
mdiMapMarkerOutline,
mdiMaterialDesign,
+ mdiMedal,
mdiMenu,
mdiMenuDown,
mdiMenuLeft,
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
index 8138d122639..2004eff8169 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.sass
+++ b/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)
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
index ea6132a190d..1c9d0fff977 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.tsx
+++ b/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()({
'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()({
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 }
>