diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index 7a84d6ff07..b48e25995e 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -243,8 +243,8 @@
 				v-if="mode === 'auto'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledAuto || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
@@ -257,8 +257,8 @@
 				v-else-if="mode === 'manual'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledManual || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
@@ -277,7 +277,7 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcLoadingIcon, NcCheckboxRadioSwitch, NcInputField, NcPasswordField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
 import { Tab, Tabs } from 'vue-tabs-component'
 import IconCheck from 'vue-material-design-icons/Check.vue'
diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index a03299f537..079f05f15b 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { NcLoadingIcon, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 783313041f..09d7563a1f 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -15,7 +15,7 @@
 					:enable-delete="false">
 					<NcButton
 						v-if="!account.provisioningId"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
 						:name="t('mail', 'Change name')"
 						@click="$emit('rename-primary-alias')">
@@ -54,7 +54,7 @@
 		<div v-if="!account.provisioningId" class="aliases-controls">
 			<NcButton
 				v-if="!showForm"
-				type="primary"
+				variant="primary"
 				:aria-label="t('mail', 'Add alias')"
 				@click="showForm = true">
 				{{ t('mail', 'Add alias') }}
@@ -62,8 +62,8 @@
 
 			<NcButton
 				v-if="showForm"
-				native-type="submit"
-				type="primary"
+				type="submit"
+				variant="primary"
 				form="createAliasForm"
 				:aria-label="t('mail', 'Create alias')"
 				:disabled="loading">
@@ -75,7 +75,7 @@
 			</NcButton>
 			<NcButton
 				v-if="showForm"
-				type="tertiary-no-background"
+				variant="tertiary-no-background"
 				class="button-text"
 				:aria-label="t('mail', 'Cancel')"
 				@click="resetCreate">
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 9203ecdb65..01f97c8d4f 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -47,7 +47,7 @@
 				<label class="to-label" for="to">
 					{{ t('mail', 'To') }}
 				</label>
-				<NcButton size="small" type="tertiary-no-background" @click.prevent="toggleViewMode">
+				<NcButton size="small" variant="tertiary-no-background" @click.prevent="toggleViewMode">
 					{{ t('mail', 'Cc/Bcc') }}
 				</NcButton>
 			</div>
@@ -295,7 +295,7 @@
 				<NcButton
 					v-if="!savingDraft && !canSaveDraft"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Save draft')"
 					@click="saveDraft">
 					<template #icon>
@@ -305,7 +305,7 @@
 				<NcButton
 					v-if="!savingDraft && draftSaved"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Discard & close draft')"
 					@click="$emit('discard-draft')">
 					<template #icon>
@@ -316,7 +316,7 @@
 			<div class="composer-actions--secondary-actions">
 				<NcButton
 					v-if="!encrypt && editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Enable formatting')"
 					@click="setEditorModeHtml()">
 					<template #icon>
@@ -325,7 +325,7 @@
 				</NcButton>
 				<NcButton
 					v-if="!encrypt && !editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:pressed="true"
 					:aria-label="t('mail', 'Disable formatting')"
 					@click="setEditorModeText()">
@@ -391,21 +391,21 @@
 							}}
 						</NcActionButton>
 						<NcActionCheckbox
-							:checked="requestMdnVal"
+							:model-value="requestMdnVal"
 							@check="requestMdnVal = true"
 							@uncheck="requestMdnVal = false">
 							{{ t('mail', 'Request a read receipt') }}
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeSign"
+							:model-value="wantsSmimeSign"
 							@check="smimeSignCheck(true)"
 							@uncheck="smimeSignCheck(false)">
 							{{ t('mail', 'Sign message with S/MIME') }}
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeEncrypt"
+							:model-value="wantsSmimeEncrypt"
 							:disabled="encrypt"
 							@check="wantsSmimeEncrypt = true"
 							@uncheck="wantsSmimeEncrypt = false">
@@ -413,7 +413,7 @@
 						</NcActionCheckbox>
 						<NcActionCheckbox
 							v-if="mailvelope.available"
-							:checked="encrypt"
+							:model-value="encrypt"
 							:disabled="wantsSmimeEncrypt"
 							@change="isActionsOpen = false"
 							@check="encrypt = true"
@@ -486,8 +486,8 @@
 
 				<NcButton
 					:disabled="!canSend || sending"
-					native-type="submit"
-					type="primary"
+					type="submit"
+					variant="primary"
 					:aria-label="submitButtonTitle"
 					@click="onSend">
 					<template #icon>
@@ -506,7 +506,7 @@
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getCanonicalLocale, getFirstDay, getLocale, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcListItemIcon, NcIconSvgWrapper, NcSelect } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcIconSvgWrapper, NcListItemIcon, NcSelect } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import debounce from 'lodash/fp/debounce.js'
 import trimStart from 'lodash/fp/trimCharsStart.js'
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index a91b2377dc..05c43941be 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -542,10 +542,10 @@ import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import {
 	NcActionButton,
-	NcActionLink,
-	NcActionText,
 	NcActionInput,
+	NcActionLink,
 	NcActionSeparator,
+	NcActionText,
 	NcAssistantIcon,
 	NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'
diff --git a/src/components/InternalAddress.vue b/src/components/InternalAddress.vue
index 91efc92acf..8097b044ef 100644
--- a/src/components/InternalAddress.vue
+++ b/src/components/InternalAddress.vue
@@ -50,7 +50,7 @@
 		</NcListItem>
 
 		<NcButton
-			type="secondary"
+			variant="secondary"
 			wide
 			@click="openDialog = true">
 			<template #icon>
@@ -73,7 +73,7 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton, NcActionButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
 import { mapStores } from 'pinia'
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index e049075a84..206444b6ea 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -55,7 +55,7 @@
 			</div>
 			<div class="buttons">
 				<NcButton
-					type="primary"
+					variant="primary"
 					:disabled="loading || (!allowRoot && !selectedMailboxId)"
 					:aria-label="loading ? labelSelectLoading : labelSelect"
 					@click="onSelect">
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 592e4bf88f..02e492eca3 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -40,7 +40,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
@@ -87,7 +87,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
@@ -121,7 +121,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Follow up info')"
 										class="button">
 										<template #icon>
@@ -152,7 +152,7 @@
 							<NcPopover trigger="hover focus">
 								<template #trigger>
 									<NcButton
-										type="tertiary-no-background"
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Important info')"
 										class="button">
 										<template #icon>
@@ -200,7 +200,7 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList, NcButton, isMobile, NcPopover } from '@nextcloud/vue'
+import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 31b69c0afc..64cc2afa63 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -84,7 +84,7 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl } from '@nextcloud/router'
-import { NcLoadingIcon, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index f7d0744217..37bb29f3bf 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -11,7 +11,7 @@
 			@translate="$emit('translate')" />
 		<div v-if="hasBlockedContent" id="mail-message-has-blocked-content" style="color: #000000">
 			{{ t('mail', 'The images have been blocked to protect your privacy.') }}
-			<NcActions type="tertiary" :menu-name="t('mail', 'Show images')">
+			<NcActions variant="tertiary" :menu-name="t('mail', 'Show images')">
 				<NcActionButton @click="displayIframe">
 					<template #icon>
 						<IconImage :size="20" />
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index 1c8ee54ed0..da550e68f5 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -49,7 +49,7 @@
 						{{ t('mail', 'Delegate account') }}
 					</NcActionButton>
 					<NcActionCheckbox
-						:checked="account.showSubscribedOnly"
+						:model-value="account.showSubscribedOnly"
 						:disabled="savingShowOnlySubscribed"
 						@update:checked="changeShowSubscribedOnly">
 						{{ t('mail', 'Show only subscribed folders') }}
@@ -62,7 +62,7 @@
 					</NcActionButton>
 					<NcActionInput
 						v-if="editing && nameInput"
-						:value.sync="createMailboxName"
+						v-model="createMailboxName"
 						@submit.prevent.stop="createMailbox">
 						<template #icon>
 							<IconFolderAdd :size="20" />
@@ -109,7 +109,7 @@
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcLoadingIcon, NcAppNavigationCaption, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationCaption, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { Fragment } from 'vue-frag'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index ae93269604..a252ddcc48 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -120,7 +120,7 @@
 			</NcActionButton>
 			<NcActionInput
 				v-if="subfolderInput"
-				:value.sync="createMailboxName"
+				v-model="createMailboxName"
 				@submit.prevent.stop="createMailbox">
 				<template #icon>
 					<IconAdd :size="20" />
@@ -142,7 +142,7 @@
 			</NcActionButton>
 			<NcActionInput
 				v-if="renameInput"
-				:value.sync="mailboxName"
+				v-model="mailboxName"
 				@submit.prevent.stop="renameMailbox">
 				<template #icon>
 					<IconEdit
@@ -188,7 +188,7 @@
 
 			<NcActionCheckbox
 				v-if="notVirtual"
-				:checked="mailbox.isSubscribed"
+				:model-value="mailbox.isSubscribed"
 				:disabled="changeSubscription"
 				@update:checked="changeFolderSubscription">
 				{{ t('mail', 'Subscribed') }}
@@ -196,7 +196,7 @@
 
 			<NcActionCheckbox
 				v-if="notVirtual && notInbox"
-				:checked="mailbox.syncInBackground"
+				:model-value="mailbox.syncInBackground"
 				:disabled="changingSyncInBackground"
 				@update:checked="changeSyncInBackground">
 				{{ t('mail', 'Sync in background') }}
@@ -326,7 +326,7 @@ export default {
 		IconInboxOutline,
 		IconWrench,
 		ImportantIcon,
-		IconLoading,
+		NcLoadingIcon,
 		MoveMailboxModal,
 		AlarmIcon,
 	},
diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue
index bc98b03418..ce93b914fc 100644
--- a/src/components/NewMessageButtonHeader.vue
+++ b/src/components/NewMessageButtonHeader.vue
@@ -6,7 +6,7 @@
 	<div class="header">
 		<NcButton
 			:aria-label="t('mail', 'New message')"
-			type="secondary"
+			variant="secondary"
 			button-id="mail_new_message"
 			:wide="true"
 			@click="onNewMessage">
@@ -18,7 +18,7 @@
 		<NcButton
 			v-if="showRefresh && currentMailbox"
 			:aria-label="t('mail', 'Refresh')"
-			type="tertiary-no-background"
+			variant="tertiary-no-background"
 			class="refresh__button"
 			:disabled="refreshing"
 			@click="refreshMailbox">
@@ -26,7 +26,7 @@
 				<IconRefresh
 					v-if="!refreshing"
 					:size="20" />
-				<IconLoading
+				<NcLoadingIcon
 					v-if="refreshing"
 					:size="20" />
 			</template>
@@ -37,7 +37,7 @@
 <script>
 import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
-import IconLoading from '@nextcloud/vue/components/NcLoadingIcon'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
 import logger from '../logger.js'
@@ -49,7 +49,7 @@ export default {
 		NcButton,
 		IconAdd,
 		IconRefresh,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 5d13e11829..3719629fb3 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -123,9 +123,9 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import {
+	NcButton,
 	NcEmptyContent,
 	NcModal,
-	NcButton,
 } from '@nextcloud/vue'
 import { mapActions, mapState, mapStores } from 'pinia'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
diff --git a/src/components/OutOfOfficeForm.vue b/src/components/OutOfOfficeForm.vue
index a541f801a7..2ac8f4bd60 100644
--- a/src/components/OutOfOfficeForm.vue
+++ b/src/components/OutOfOfficeForm.vue
@@ -106,8 +106,8 @@
 		</p>
 
 		<NcButton
-			type="primary"
-			native-type="submit"
+			variant="primary"
+			type="submit"
 			:aria-label="t('mail', 'Save autoresponder')"
 			:disabled="loading || !valid">
 			<template #icon>
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 097be29c21..534494053b 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -20,7 +20,7 @@
 				</p>
 				<NcButton
 					v-if="contactsWithEmail && contactsWithEmail.length > 0"
-					type="tertiary-no-background"
+					variant="tertiary-no-background"
 					:aria-label="t('mail', 'Contacts with this address')"
 					class="contact-existing">
 					<template #icon>
@@ -31,7 +31,7 @@
 				<div v-if="selection === ContactSelectionStateEnum.select" class="contact-menu">
 					<NcButton
 						:aria-label="t('mail', 'Reply')"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						@click="onClickReply">
 						<template #icon>
 							<IconReply :size="20" />
@@ -39,7 +39,7 @@
 						{{ t('mail', 'Reply') }}
 					</NcButton>
 					<NcButton
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Add to Contact')"
 						@click="selection = ContactSelectionStateEnum.existing">
 						<template #icon>
@@ -48,7 +48,7 @@
 						{{ t('mail', 'Add to Contact') }}
 					</NcButton>
 					<NcButton
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'New Contact')"
 						@click="selection = ContactSelectionStateEnum.new">
 						<template #icon>
@@ -57,7 +57,7 @@
 						{{ t('mail', 'New Contact') }}
 					</NcButton>
 					<NcButton
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Copy to clipboard')"
 						@click="onClickCopyToClipboard">
 						<template #icon>
@@ -86,7 +86,7 @@
 				</div>
 				<div v-if="selection !== ContactSelectionStateEnum.select">
 					<NcButton
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
 						@click="selection = ContactSelectionStateEnum.select">
 						<template #icon>
@@ -98,7 +98,7 @@
 					<NcButton
 						v-close-popover
 						:disabled="addButtonDisabled"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Add')"
 						@click="onClickAddToContact">
 						<template #icon>
diff --git a/src/components/SieveAccountForm.vue b/src/components/SieveAccountForm.vue
index adb780460a..cba8968bfc 100644
--- a/src/components/SieveAccountForm.vue
+++ b/src/components/SieveAccountForm.vue
@@ -57,7 +57,7 @@
 			{{ errorMessage }}
 		</p>
 		<NcButton
-			type="primary"
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save sieve settings')"
 			@click.prevent="onSubmit">
diff --git a/src/components/SieveFilterForm.vue b/src/components/SieveFilterForm.vue
index b6900105b7..7bfccab176 100644
--- a/src/components/SieveFilterForm.vue
+++ b/src/components/SieveFilterForm.vue
@@ -15,7 +15,7 @@
 			{{ errorMessage }}
 		</p>
 		<NcButton
-			type="primary"
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save sieve script')"
 			@click="saveActiveScript">
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index 37f571f80c..ca9b4e443c 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -45,7 +45,7 @@
 			<p>{{ t('mail', 'This signature contains images. New messages will use rich text, even though your writing mode is set to plain text.') }}</p>
 		</NcNoteCard>
 		<NcButton
-			type="primary"
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save signature')"
 			@click="saveSignature">
@@ -58,7 +58,7 @@
 		<NcButton
 			v-if="signature"
 			:aria-label="t('mail', 'Delete')"
-			type="tertiary-no-background"
+			variant="tertiary-no-background"
 			class="button-text"
 			@click="deleteSignature">
 			{{ t('mail', 'Delete') }}
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index 0b40a425db..c720e2f53b 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -66,7 +66,7 @@
 
 <script>
 import { showInfo } from '@nextcloud/dialogs'
-import { NcActionInput, NcActions, NcActionText, NcLoadingIcon, NcActionButton, NcColorPicker } from '@nextcloud/vue'
+import { NcActionButton, NcActionInput, NcActions, NcActionText, NcColorPicker, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconEdit from 'vue-material-design-icons/PencilOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 743df63a40..79078c156e 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -57,7 +57,7 @@
 
 <script>
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { NcActionInput, NcActionText, NcLoadingIcon, NcModal, NcButton } from '@nextcloud/vue'
+import { NcActionInput, NcActionText, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconTag from 'vue-material-design-icons/TagOutline.vue'
diff --git a/src/components/settings/AntiSpamSettings.vue b/src/components/settings/AntiSpamSettings.vue
index 4873955a7d..d384baf6d3 100644
--- a/src/components/settings/AntiSpamSettings.vue
+++ b/src/components/settings/AntiSpamSettings.vue
@@ -36,10 +36,10 @@
 							type="email">
 						<br>
 						<NcButton
-							type="secondary"
+							variant="secondary"
 							:aria-label="t('mail', 'Save')"
 							:disabled="loading"
-							native-type="submit"
+							type="submit"
 							class="config-button">
 							<template #icon>
 								<IconUpload :size="20" />
@@ -50,7 +50,7 @@
 							:disabled="loading"
 							:aria-label="t('mail', 'Reset')"
 							class="config-button"
-							type="secondary"
+							variant="secondary"
 							@click="resetForm()">
 							<template #icon>
 								<IconDelete :size="20" />
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index 44813c82ea..67cc3f61ae 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -39,7 +39,7 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContent, NcEmptyContent, NcContent } from '@nextcloud/vue'
+import { NcAppContent, NcContent, NcEmptyContent } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import AccountForm from '../components/AccountForm.vue'
 import Navigation from '../components/Navigation.vue'