Replace <button> with ButtonVue and fix styles in AppointmentSlot.vuefix/515-replace-to-button-component

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

18 files changed, 129 insertions, 68 deletions

diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
index b45db6a8..4849a864 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
@@ -22,36 +22,38 @@
 
 <template>
 	<div class="datepicker-button-section">
-		<button v-shortkey="previousShortKeyConf"
+		<ButtonVue v-shortkey="previousShortKeyConf"
 			:aria-label="previousLabel"
 			class="datepicker-button-section__previous button"
 			:title="previousLabel"
-			type="button"
 			@click="navigateToPreviousTimeRange"
 			@shortkey="navigateToPreviousTimeRange">
-			<ChevronLeftIcon :size="22" />
-		</button>
-		<button class="datepicker-button-section__datepicker-label button datepicker-label"
+			<template #icon>
+				<ChevronLeftIcon :size="22" />
+			</template>
+		</ButtonVue>
+		<ButtonVue class="datepicker-button-section__datepicker-label button datepicker-label"
 			@click.stop.prevent="toggleDatepicker"
 			@mousedown.stop.prevent="doNothing"
 			@mouseup.stop.prevent="doNothing">
 			{{ selectedDate | formatDateRage(view, locale) }}
-		</button>
+		</ButtonVue>
 		<DatePicker ref="datepicker"
 			class="datepicker-button-section__datepicker"
 			:date="selectedDate"
 			:is-all-day="true"
 			:open.sync="isDatepickerOpen"
 			@change="navigateToDate" />
-		<button v-shortkey="nextShortKeyConf"
+		<ButtonVue v-shortkey="nextShortKeyConf"
 			:aria-label="nextLabel"
 			class="datepicker-button-section__next button"
 			:title="nextLabel"
-			type="button"
 			@click="navigateToNextTimeRange"
 			@shortkey="navigateToNextTimeRange">
-			<ChevronRightIcon :size="22" />
-		</button>
+			<template #icon>
+				<ChevronRightIcon :size="22" />
+			</template>
+		</ButtonVue>
 	</div>
 </template>
 
@@ -66,6 +68,7 @@ import formatDateRage from '../../../filters/dateRangeFormat.js'
 import DatePicker from '../../Shared/DatePicker.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationHeaderDatePicker',
@@ -73,6 +76,7 @@ export default {
 		DatePicker,
 		ChevronLeftIcon,
 		ChevronRightIcon,
+	  ButtonVue,
 	},
 	filters: {
 		formatDateRage,
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
index 6747b599..87f351c1 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
@@ -21,21 +21,26 @@
   -->
 
 <template>
-	<button v-shortkey="['c']"
+	<ButtonVue v-shortkey="['c']"
 		class="button primary new-event"
 		@click="newEvent"
 		@shortkey="newEvent">
-		<Plus :size="20" />
+		<template #icon>
+			<Plus :size="20" />
+		</template>
 		{{ $t('calendar', 'New event') }}
-	</button>
+	</ButtonVue>
 </template>
 
 <script>
 import Plus from 'vue-material-design-icons/Plus.vue'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
+
 export default {
 	name: 'AppNavigationHeaderNewEvent',
 	components: {
 		Plus,
+	  ButtonVue,
 	},
 	methods: {
 		/**
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
index b38cff85..3d765b17 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
@@ -21,18 +21,22 @@
   -->
 
 <template>
-	<button v-shortkey="['t']"
+	<ButtonVue v-shortkey="['t']"
 		class="button today"
 		@shortkey="today"
 		@click="today">
 		{{ $t('calendar', 'Today') }}
-	</button>
+	</ButtonVue>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationHeaderTodayButton',
+	components: {
+		ButtonVue,
+	},
 	methods: {
 		today() {
 			const name = this.$route.name
diff --git a/src/components/AppNavigation/CalendarList/Trashbin.vue b/src/components/AppNavigation/CalendarList/Trashbin.vue
index fbebf06f..e59f312d 100644
--- a/src/components/AppNavigation/CalendarList/Trashbin.vue
+++ b/src/components/AppNavigation/CalendarList/Trashbin.vue
@@ -76,9 +76,9 @@
 									<Moment class="timestamp" :timestamp="item.deletedAt" />
 								</td>
 								<td class="item-actions">
-									<button @click="restore(item)">
+									<ButtonVue @click="restore(item)">
 										{{ t('calendar','Restore') }}
-									</button>
+									</ButtonVue>
 
 									<Actions :force-menu="true">
 										<ActionButton @click="onDeletePermanently(item)">
@@ -95,9 +95,9 @@
 							<p v-if="retentionDuration">
 								{{ n('calendar', 'Items in the trash bin are deleted after {numDays} day', 'Items in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }}
 							</p>
-							<button @click="onEmptyTrashBin()">
+							<ButtonVue @click="onEmptyTrashBin()">
 								{{ t('calendar','Empty trash bin') }}
-							</button>
+							</ButtonVue>
 						</div>
 					</template>
 				</div>
@@ -110,6 +110,7 @@
 import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import moment from '@nextcloud/moment'
@@ -125,6 +126,7 @@ export default {
 	name: 'Trashbin',
 	components: {
 		AppNavigationItem,
+	  ButtonVue,
 		EmptyContent,
 		Modal,
 		Moment,
diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
index f3442364..d97e2a17 100644
--- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
+++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
@@ -22,20 +22,24 @@
 
 <template>
 	<div class="today-button-section">
-		<button :aria-label="title"
+		<ButtonVue :aria-label="title"
 			class="button"
 			:title="title"
 			@click="today()">
 			{{ $t('calendar', 'Today') }}
-		</button>
+		</ButtonVue>
 	</div>
 </template>
 
 <script>
 import moment from '@nextcloud/moment'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 
 export default {
 	name: 'EmbedHeaderTodayButton',
+	components: {
+		ButtonVue,
+	},
 	computed: {
 		title() {
 			return moment().format('ll')
diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
index fc34282f..fd35b6e2 100644
--- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
+++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
@@ -22,24 +22,29 @@
 
 <template>
 	<div class="view-button-section">
-		<button :class="{primary: isAgendaDayViewSelected}" class="button" @click="view('timeGridDay')">
+		<ButtonVue :class="{primary: isAgendaDayViewSelected}" class="button" @click="view('timeGridDay')">
 			{{ $t('calendar', 'Day') }}
-		</button>
-		<button :class="{primary: isAgendaWeekViewSelected}" class="button" @click="view('timeGridWeek')">
+		</ButtonVue>
+		<ButtonVue :class="{primary: isAgendaWeekViewSelected}" class="button" @click="view('timeGridWeek')">
 			{{ $t('calendar', 'Week') }}
-		</button>
-		<button :class="{primary: isMonthViewSelected}" class="button" @click="view('dayGridMonth')">
+		</ButtonVue>
+		<ButtonVue :class="{primary: isMonthViewSelected}" class="button" @click="view('dayGridMonth')">
 			{{ $t('calendar', 'Month') }}
-		</button>
-		<button :class="{primary: isMonthListViewSelected}" class="button" @click="view('listMonth')">
+		</ButtonVue>
+		<ButtonVue :class="{primary: isMonthListViewSelected}" class="button" @click="view('listMonth')">
 			{{ $t('calendar', 'List') }}
-		</button>
+		</ButtonVue>
 	</div>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
+
 export default {
 	name: 'EmbedHeaderViewButtons',
+	components: {
+		ButtonVue,
+	},
 	computed: {
 		isAgendaDayViewSelected() {
 			return this.selectedView === 'timeGridDay'
diff --git a/src/components/AppNavigation/Settings/ImportScreen.vue b/src/components/AppNavigation/Settings/ImportScreen.vue
index f79b8cfa..eaa9ee63 100644
--- a/src/components/AppNavigation/Settings/ImportScreen.vue
+++ b/src/components/AppNavigation/Settings/ImportScreen.vue
@@ -43,23 +43,25 @@
 		</transition-group>
 
 		<div class="import-modal__actions">
-			<button @click="cancelImport">
+			<ButtonVue @click="cancelImport">
 				{{ $t('calendar', 'Cancel' ) }}
-			</button>
-			<button class="primary" @click="importCalendar">
+			</ButtonVue>
+			<ButtonVue class="primary" @click="importCalendar">
 				{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
-			</button>
+			</ButtonVue>
 		</div>
 	</Modal>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import ImportScreenRow from './ImportScreenRow.vue'
 import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 export default {
 	name: 'ImportScreen',
 	components: {
+	  ButtonVue,
 		ImportScreenRow,
 		Modal,
 	},
diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue
index abe7dd26..e22ff1f2 100644
--- a/src/components/AppointmentConfigModal.vue
+++ b/src/components/AppointmentConfigModal.vue
@@ -127,11 +127,11 @@
 						</div>
 					</fieldset>
 				</div>
-				<button class="primary appointment-config-modal__submit-button"
+				<ButtonVue class="primary appointment-config-modal__submit-button"
 					:disabled="!editing.name || editing.length === 0"
 					@click="save">
 					{{ saveButtonText }}
-				</button>
+				</ButtonVue>
 			</template>
 		</div>
 	</Modal>
@@ -152,6 +152,7 @@ import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelec
 import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue'
 import logger from '../utils/logger.js'
 import Confirmation from './AppointmentConfigModal/Confirmation.vue'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 
 export default {
 	name: 'AppointmentConfigModal',
@@ -167,6 +168,7 @@ export default {
 		DurationSelect,
 		VisibilitySelect,
 		Confirmation,
+	  ButtonVue,
 	},
 	props: {
 		config: {
diff --git a/src/components/AppointmentConfigModal/Confirmation.vue b/src/components/AppointmentConfigModal/Confirmation.vue
index 4271bea7..8f1a02fe 100644
--- a/src/components/AppointmentConfigModal/Confirmation.vue
+++ b/src/components/AppointmentConfigModal/Confirmation.vue
@@ -34,15 +34,16 @@
 				target="_blank">
 				{{ t('calendar', 'Preview') }}
 			</a>
-			<button v-if="showCopyLinkButton"
+			<ButtonVue v-if="showCopyLinkButton"
 				@click="copyLink">
 				{{ t('calendar', 'Copy link') }}
-			</button>
+			</ButtonVue>
 		</div>
 	</div>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import AppointmentConfig from '../../models/appointmentConfig.js'
@@ -50,6 +51,7 @@ import AppointmentConfig from '../../models/appointmentConfig.js'
 export default {
 	name: 'Confirmation',
 	components: {
+	  ButtonVue,
 		EmptyContent,
 		CheckIcon,
 	},
diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue
index 49ad5184..f80ecc88 100644
--- a/src/components/Appointments/AppointmentDetails.vue
+++ b/src/components/Appointments/AppointmentDetails.vue
@@ -55,10 +55,10 @@
 					{{ $t('calendar', 'Could not book the appointment. Please try again later or contact the organizer.') }}
 				</div>
 				<div class="buttons">
-					<button class="button primary"
+					<ButtonVue class="button primary"
 						@click="save">
 						{{ $t('calendar', 'Book the appointment') }}
-					</button>
+					</ButtonVue>
 				</div>
 			</div>
 		</div>
@@ -66,6 +66,7 @@
 </template>
 <script>
 import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 import autosize from '../../directives/autosize.js'
 
@@ -75,6 +76,7 @@ export default {
 	name: 'AppointmentDetails',
 	components: {
 		Avatar,
+	  ButtonVue,
 		Modal,
 	},
 	directives: {
diff --git a/src/components/Appointments/AppointmentSlot.vue b/src/components/Appointments/AppointmentSlot.vue
index 08220be6..1d94a7ce 100644
--- a/src/components/Appointments/AppointmentSlot.vue
+++ b/src/components/Appointments/AppointmentSlot.vue
@@ -20,16 +20,20 @@
   -->
 
 <template>
-	<button class="appointment-slot" @click="$emit('click', $event)">
+	<ButtonVue class="appointment-slot" @click="$emit('click', $event)">
 		{{ startTime }} - {{ endTime }}
-	</button>
+	</ButtonVue>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import { timeStampToLocaleTime } from '../../utils/localeTime.js'
 
 export default {
 	name: 'AppointmentSlot',
+	components: {
+		ButtonVue,
+	},
 	props: {
 		start: {
 			required: true,
@@ -61,3 +65,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.appointment-slot {
+	margin: 5px 0;
+}
+</style>
diff --git a/src/components/Editor/InvitationResponseButtons.vue b/src/components/Editor/InvitationResponseButtons.vue
index 4989d997..c1fb5c31 100644
--- a/src/components/Editor/InvitationResponseButtons.vue
+++ b/src/components/Editor/InvitationResponseButtons.vue
@@ -23,25 +23,25 @@
 <template>
 	<div class="invitation-response-buttons"
 		:class="{ 'invitation-response-buttons--narrow': narrow }">
-		<button v-if="!isAccepted"
+		<ButtonVue v-if="!isAccepted"
 			class="invitation-response-buttons__button primary"
 			:disabled="loading"
 			@click="accept">
 			{{ t('calendar', 'Accept') }}
-		</button>
-		<button v-if="!isDeclined"
+		</ButtonVue>
+		<ButtonVue v-if="!isDeclined"
 			class="invitation-response-buttons__button error"
 			:disabled="loading"
 			@click="decline">
 			{{ t('calendar', 'Decline') }}
-		</button>
+		</ButtonVue>
 		<template v-if="!isTentative">
-			<button v-if="!narrow"
+			<ButtonVue v-if="!narrow"
 				class="invitation-response-buttons__button"
 				:disabled="loading"
 				@click="tentative">
 				{{ t('calendar', 'Tentative') }}
-			</button>
+			</ButtonVue>
 			<Actions v-else>
 				<ActionButton :disabled="loading"
 					@click="tentative">
@@ -58,6 +58,7 @@
 <script>
 import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import CalendarQuestionIcon from 'vue-material-design-icons/CalendarQuestion.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import logger from '../../utils/logger.js'
@@ -67,6 +68,7 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
+	  ButtonVue,
 		CalendarQuestionIcon,
 	},
 	props: {
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index e35e4311..365b9358 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -42,15 +42,15 @@
 		<OrganizerNoEmailError v-if="!isReadOnly && isListEmpty && !hasUserEmailAddress" />
 
 		<div class="invitees-list-button-group">
-			<button v-if="isCreateTalkRoomButtonVisible"
+			<ButtonVue v-if="isCreateTalkRoomButtonVisible"
 				:disabled="isCreateTalkRoomButtonDisabled"
 				@click="createTalkRoom">
 				{{ $t('calendar', 'Create Talk room for this event') }}
-			</button>
+			</ButtonVue>
 
-			<button v-if="!isReadOnly" :disabled="isListEmpty" @click="openFreeBusy">
+			<ButtonVue v-if="!isReadOnly" :disabled="isListEmpty" @click="openFreeBusy">
 				{{ $t('calendar', 'Show busy times') }}
-			</button>
+			</ButtonVue>
 			<FreeBusy v-if="showFreeBusyModel"
 				:attendees="calendarObjectInstance.attendees"
 				:organizer="calendarObjectInstance.organizer"
@@ -62,6 +62,7 @@
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import InviteesListSearch from './InviteesListSearch.vue'
 import InviteesListItem from './InviteesListItem.vue'
@@ -79,6 +80,7 @@ import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attende
 export default {
 	name: 'InviteesList',
 	components: {
+	  ButtonVue,
 		FreeBusy,
 		OrganizerNoEmailError,
 		NoAttendeesView,
diff --git a/src/components/Editor/Properties/PropertyColor.vue b/src/components/Editor/Properties/PropertyColor.vue
index 6e39c1a1..72a74a03 100644
--- a/src/components/Editor/Properties/PropertyColor.vue
+++ b/src/components/Editor/Properties/PropertyColor.vue
@@ -41,7 +41,7 @@
 			<ColorPicker :value="selectedColor"
 				:open.sync="isColorPickerOpen"
 				@input="changeColor">
-				<button class="property-color__color-preview"
+				<ButtonVue class="property-color__color-preview"
 					:style="{'background-color': selectedColor }" />
 			</ColorPicker>
 			<Actions v-if="showColorRevertButton">
@@ -59,6 +59,7 @@
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
 import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import ColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import debounce from 'debounce'
@@ -70,6 +71,7 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
+	  ButtonVue,
 		ColorPicker,
 		Undo,
 	},
diff --git a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
index 4d91ebf5..7765bfc9 100644
--- a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
@@ -30,14 +30,14 @@
 				{{ $t('calendar', 'By day of the month') }}
 			</ActionRadio>
 			<div class="repeat-option-set-section__grid">
-				<button v-for="option in byMonthDayOptions"
+				<ButtonVue v-for="option in byMonthDayOptions"
 					:key="option.value"
 					class="repeat-option-set-section-grid-item"
 					:class="{ primary: option.selected }"
 					:disabled="!byMonthDayEnabled"
 					@click="toggleByMonthDay(option.value)">
 					{{ option.label }}
-				</button>
+				</ButtonVue>
 			</div>
 		</div>
 		<div class="repeat-option-set-section repeat-option-set-section--on-the-select">
@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue'
 import RepeatOnTheSelect from './RepeatOnTheSelect.vue'
 import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
@@ -65,6 +66,7 @@ import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
 export default {
 	name: 'RepeatFreqMonthlyOptions',
 	components: {
+	  ButtonVue,
 		RepeatOnTheSelect,
 		RepeatFirstLastSelect,
 		ActionRadio,
diff --git a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
index 022a3982..567244b3 100644
--- a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
@@ -26,22 +26,26 @@
 			{{ $t('calendar', 'on') }}
 		</span>
 		<div class="repeat-option-set-section__grid">
-			<button v-for="option in options"
+			<ButtonVue v-for="option in options"
 				:key="option.value"
 				class="repeat-option-set-section-grid-item"
 				:class="{ primary: option.selected }"
 				@click="toggleByDay(option.value)">
 				{{ option.label }}
-			</button>
+			</ButtonVue>
 		</div>
 	</div>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import { getDayNamesMin } from '@nextcloud/l10n'
 
 export default {
 	name: 'RepeatFreqWeeklyOptions',
+	components: {
+	  ButtonVue,
+	},
 	props: {
 		byDay: {
 			type: Array,
diff --git a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
index 60b8bcd6..5fa4357e 100644
--- a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
@@ -24,13 +24,13 @@
 	<div class="repeat-option-set repeat-option-set--yearly">
 		<div class="repeat-option-set-section">
 			<div class="repeat-option-set-section__grid">
-				<button v-for="option in options"
+				<ButtonVue v-for="option in options"
 					:key="option.value"
 					class="repeat-option-set-section-grid-item"
 					:class="{ primary: option.selected }"
 					@click="toggleByMonth(option.value)">
 					{{ option.label }}
-				</button>
+				</ButtonVue>
 			</div>
 		</div>
 		<div class="repeat-option-set-section repeat-option-set-section--on-the-select">
@@ -51,6 +51,7 @@
 
 <script>
 import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue'
 import RepeatOnTheSelect from './RepeatOnTheSelect.vue'
 
@@ -60,6 +61,7 @@ export default {
 	name: 'RepeatFreqYearlyOptions',
 	components: {
 		ActionCheckbox,
+	  ButtonVue,
 		RepeatFirstLastSelect,
 		RepeatOnTheSelect,
 	},
diff --git a/src/components/Editor/SaveButtons.vue b/src/components/Editor/SaveButtons.vue
index 43f6b817..1119f9bd 100644
--- a/src/components/Editor/SaveButtons.vue
+++ b/src/components/Editor/SaveButtons.vue
@@ -22,36 +22,41 @@
 
 <template>
 	<div>
-		<button v-if="showMoreButton"
+		<ButtonVue v-if="showMoreButton"
 			@click="showMore">
 			{{ $t('calendar', 'More') }}
-		</button>
-		<button v-if="showSaveButton"
+		</ButtonVue>
+		<ButtonVue v-if="showSaveButton"
 			class="primary"
 			@click="saveThisOnly">
 			{{ $t('calendar', 'Save') }}
-		</button>
-		<button v-if="showUpdateButton"
+		</ButtonVue>
+		<ButtonVue v-if="showUpdateButton"
 			class="primary"
 			@click="saveThisOnly">
 			{{ $t('calendar', 'Update') }}
-		</button>
-		<button v-if="showUpdateOnlyThisButton"
+		</ButtonVue>
+		<ButtonVue v-if="showUpdateOnlyThisButton"
 			class="primary"
 			@click="saveThisOnly">
 			{{ $t('calendar', 'Update this occurrence') }}
-		</button>
-		<button v-if="showUpdateThisAndFutureButton"
+		</ButtonVue>
+		<ButtonVue v-if="showUpdateThisAndFutureButton"
 			:class="{ primary: forceThisAndAllFuture}"
 			@click="saveThisAndAllFuture">
 			{{ $t('calendar', 'Update this and all future') }}
-		</button>
+		</ButtonVue>
 	</div>
 </template>
 
 <script>
+import { NcButton as ButtonVue } from '@nextcloud/vue'
+
 export default {
 	name: 'SaveButtons',
+	components: {
+	  ButtonVue,
+	},
 	props: {
 		canCreateRecurrenceException: {
 			type: Boolean,