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 @@ + + + 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 } >