From 4d32ef455e506feb1a86887c29182ee47a6dbbc6 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 12:52:08 +0100
Subject: [PATCH 1/6] feat(NcButton): Allow to set the color variant using
 `variant` prop.

Deprecate `type` for usage with the color variant.
Also deprecate `nativeType` in favor of `type` and `variant`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 CHANGELOG.md                                  | 15 +++
 src/components/NcButton/NcButton.vue          | 97 ++++++++++++++-----
 tests/unit/components/NcButton/button.spec.js | 46 ++++++++-
 3 files changed, 133 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94a3188282..275a2951ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,21 @@
 
 # Changelog
 
+## UNRELEASED
+
+### 📝 Notes
+#### `NcButton` color variant and native type
+`NcButton` now provides a `variant` prop to set the color variant to use (e.g. `'primary'`) and allows to set the native button type using the `type` prop.
+The legacy behavior, `type` for the color variant and `nativeType` for the button type, still works but will be removed in the next major version.
+
+To make a later migration to version 9 easier you can already migrate your `NcButton` usage like this:
+```vue
+<!-- Before: -->
+<NcButton type="primary" native-type="submit">Submit</NcButton>
+<!-- After: -->
+<NcButton type="submit" variant="primary">Submit</NcButton>
+```
+
 ## [v8.23.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.1) (2025-02-13)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.23.0...v8.23.1)
 
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index 189ddd9d4c..370629add9 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -37,7 +37,7 @@ It can be used with one or multiple actions.
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
-			type="tertiary-no-background">
+			variant="tertiary-no-background">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
@@ -48,7 +48,7 @@ It can be used with one or multiple actions.
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
-			type="tertiary">
+			variant="tertiary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
@@ -69,7 +69,7 @@ It can be used with one or multiple actions.
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
-			type="primary">
+			variant="primary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
@@ -102,7 +102,7 @@ It can be used with one or multiple actions.
 		<NcButton
 			:disabled="disabled"
 			:size="size"
-			type="success">
+			variant="success">
 			<template #icon>
 				<Video
 					:size="20" />
@@ -112,7 +112,7 @@ It can be used with one or multiple actions.
 		<NcButton
 			:disabled="disabled"
 			:size="size"
-			type="warning">
+			variant="warning">
 			<template #icon>
 				<Video
 					:size="20" />
@@ -122,7 +122,7 @@ It can be used with one or multiple actions.
 		<NcButton
 			:disabled="disabled"
 			:size="size"
-			type="error">
+			variant="error">
 			<template #icon>
 				<Video
 					:size="20" />
@@ -189,13 +189,13 @@ Sometimes it is required to change the icon alignment on the button, like for sw
 ```vue
 <template>
 	<div style="display: flex; flex-direction: column; gap: 12px;">
-		<NcButton aria-label="center (default)" type="secondary" wide>
+		<NcButton aria-label="center (default)" variant="secondary" wide>
 			<template #icon>
 				<IconLeft :size="20" />
 			</template>
 			center (default)
 		</NcButton>
-		<NcButton alignment="center-reverse" aria-label="center-reverse" type="secondary" wide>
+		<NcButton alignment="center-reverse" aria-label="center-reverse" variant="secondary" wide>
 			<template #icon>
 				<IconRight :size="20" />
 			</template>
@@ -203,13 +203,13 @@ Sometimes it is required to change the icon alignment on the button, like for sw
 		</NcButton>
 		<div style="display: flex; gap: 12px;">
 			<div style="display: flex; flex-direction: column; gap: 12px; flex: 1">
-				<NcButton alignment="start" aria-label="start" type="secondary" wide>
+				<NcButton alignment="start" aria-label="start" variant="secondary" wide>
 					<template #icon>
 						<IconLeft :size="20" />
 					</template>
 					start
 				</NcButton>
-				<NcButton alignment="start-reverse" aria-label="start-reverse" type="secondary" wide>
+				<NcButton alignment="start-reverse" aria-label="start-reverse" variant="secondary" wide>
 					<template #icon>
 						<IconRight :size="20" />
 					</template>
@@ -217,13 +217,13 @@ Sometimes it is required to change the icon alignment on the button, like for sw
 				</NcButton>
 			</div>
 			<div style="display: flex; flex-direction: column; gap: 12px; flex: 1">
-				<NcButton alignment="end" aria-label="end" type="secondary" wide>
+				<NcButton alignment="end" aria-label="end" variant="secondary" wide>
 					<template #icon>
 						<IconLeft :size="20" />
 					</template>
 					end
 				</NcButton>
-				<NcButton alignment="end-reverse" aria-label="end-reverse" type="secondary" wide>
+				<NcButton alignment="end-reverse" aria-label="end-reverse" variant="secondary" wide>
 					<template #icon>
 						<IconRight :size="20" />
 					</template>
@@ -249,7 +249,7 @@ export default {
 ### Pressed state
 
 It is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.
-The button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured type otherwise).
+The button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured variant otherwise).
 
 Do not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed
 
@@ -257,14 +257,14 @@ Do not change `text` or `aria-label` of the pressed/unpressed button. See: https
 <template>
 	<div>
 		<div style="display: flex; gap: 12px;">
-			<NcButton :pressed.sync="isFavorite" aria-label="Favorite" type="tertiary-no-background">
+			<NcButton :pressed.sync="isFavorite" aria-label="Favorite" variant="tertiary-no-background">
 				<template #icon>
 					<IconStar v-if="isFavorite" :size="20" />
 					<IconStarOutline v-else :size="20" />
 				</template>
 			</NcButton>
 
-			<NcButton :pressed.sync="isFavorite" type="tertiary">
+			<NcButton :pressed.sync="isFavorite" variant="tertiary">
 				<template #icon>
 					<IconStar v-if="isFavorite" :size="20" />
 					<IconStarOutline v-else :size="20" />
@@ -318,7 +318,7 @@ The standard way to implement sortable table column headers should be like this:
 				<th :aria-sorted="sortedName" class="row-name">
 					<NcButton alignment="start-reverse"
 						:wide="true"
-						type="tertiary"
+						variant="tertiary"
 						@click="sortName">
 						<template #icon>
 							<IconDown v-if="sortedName === 'ascending'" class="sort-icon" :size="20" />
@@ -330,7 +330,7 @@ The standard way to implement sortable table column headers should be like this:
 				<th :aria-sorted="sortedSize" class="row-size">
 					<NcButton alignment="end"
 						:wide="true"
-						type="tertiary"
+						variant="tertiary"
 						@click="sortSize">
 						<template #icon>
 							<IconDown v-if="sortedSize === 'ascending'" class="sort-icon" :size="20" />
@@ -465,14 +465,21 @@ export default {
 		},
 
 		/**
-		 * Specifies the button type
-		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-		 * the default button style will be applied.
+		 * Specifies the HTML button type.
+		 * Accepted values: submit, reset, button.
+		 *
+		 * For legacy reasons this can also be used to set the variant of the button (color schema).
+		 * This is discouraged but the accepted values are:
+		 * primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+		 *
+		 * @default 'secondary' (will change with v9)
+		 * @deprecated The behavior will change in v9 to only allow the native HTML button types - use `variant` instead for setting the appearance of the button.
 		 */
 		type: {
 			type: String,
 			validator(value) {
 				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
+					|| ['submit', 'reset', 'button'].includes(value)
 			},
 			default: 'secondary',
 		},
@@ -481,6 +488,8 @@ export default {
 		 * Specifies the button native type
 		 * Accepted values: submit, reset, button. If left empty,
 		 * the default "button" type will be used.
+		 *
+		 * @deprecated use `type` instead - will be removed with v9
 		 */
 		nativeType: {
 			type: String,
@@ -572,6 +581,22 @@ export default {
 			type: Boolean,
 			default: null,
 		},
+
+		/**
+		 * Specifies the button variant.
+		 *
+		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+		 *
+		 * @default 'secondary'
+		 * @since 8.23.0
+		 */
+		 variant: {
+			type: String,
+			validator(value) {
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
+			},
+			default: 'secondary',
+		},
 	},
 
 	emits: ['update:pressed', 'click'],
@@ -581,15 +606,39 @@ export default {
 		 * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state
 		 * Otherwise the type property is used.
 		 */
-		realType() {
+		realVariant() {
 			// Force *primary* when pressed
 			if (this.pressed) {
 				return 'primary'
 			}
 			// If not pressed but button is configured as stateful button then the type must not be primary
-			if (this.pressed === false && this.type === 'primary') {
+			if (this.pressed === false && (this.type === 'primary' || this.variant === 'primary')) {
 				return 'secondary'
 			}
+			// handle legacy behavior
+			if (this.type !== 'secondary' && ['primary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {
+				return this.type
+			}
+			// otherwise use the configured variant
+			return this.variant
+		},
+
+		/**
+		 * The HTML button type
+		 */
+		realType() {
+			if (typeof this.pressed === 'boolean') {
+				return 'button'
+			}
+			// Handle legacy behavior
+			if (this.nativeType !== 'button') {
+				return this.nativeType
+			}
+			// Also handling legacy behavior: Ensure we do not conflict here
+			if (['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {
+				return this.nativeType
+			}
+			// otherwise use the type
 			return this.type
 		},
 
@@ -646,7 +695,7 @@ export default {
 						'button-vue--icon-only': hasIcon && !hasText,
 						'button-vue--text-only': hasText && !hasIcon,
 						'button-vue--icon-and-text': hasIcon && hasText,
-						[`button-vue--vue-${this.realType}`]: this.realType,
+						[`button-vue--vue-${this.realVariant}`]: this.realVariant,
 						'button-vue--wide': this.wide,
 						[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',
 						'button-vue--reverse': this.isReverseAligned,
@@ -658,7 +707,7 @@ export default {
 					'aria-label': this.ariaLabel,
 					'aria-pressed': hasPressed ? this.pressed.toString() : undefined,
 					disabled: this.disabled,
-					type: isLink ? null : this.nativeType,
+					type: isLink ? null : this.realType,
 					role: isLink ? 'button' : null,
 					href: this.to ? href : (this.href || null),
 					target: isLink ? (this.target || '_self') : null,
diff --git a/tests/unit/components/NcButton/button.spec.js b/tests/unit/components/NcButton/button.spec.js
index 2ae7042154..c3b6949697 100644
--- a/tests/unit/components/NcButton/button.spec.js
+++ b/tests/unit/components/NcButton/button.spec.js
@@ -7,7 +7,51 @@ import { shallowMount } from '@vue/test-utils'
 import NcButton from '../../../../src/components/NcButton/NcButton.vue'
 
 describe('NcButton', () => {
-	describe('pressed', () => {
+	describe('native HTML button type', () => {
+		test('using the legacy `nativeType` prop works', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { nativeType: 'submit' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('submit')
+		})
+
+		test('using the `type` prop works', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { type: 'submit' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('submit')
+		})
+	})
+
+	describe('migration from `type` and `nativeType` to `variant` and `type`', () => {
+		test('Setting only the type prop to a color', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { type: 'primary' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('button')
+			expect(button.classes().filter((name) => name.includes('primary'))).toHaveLength(1)
+		})
+
+		test('Setting only the variant prop to a color', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { variant: 'primary' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('button')
+			expect(button.classes().filter((name) => name.includes('primary'))).toHaveLength(1)
+		})
+
+		test('Setting type to native type and variant prop to a color', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { type: 'submit', variant: 'primary' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('submit')
+			expect(button.classes().filter((name) => name.includes('primary'))).toHaveLength(1)
+		})
+
+		test('Setting type to color and nativeType to button type', () => {
+			const wrapper = shallowMount(NcButton, { propsData: { type: 'primary', nativeType: 'submit' } })
+			const button = wrapper.find('button')
+			expect(button.attributes('type')).toBe('submit')
+			expect(button.classes().filter((name) => name.includes('primary'))).toHaveLength(1)
+		})
+	})
+
+	describe('toggle button behavior', () => {
 		it('has aria-pressed="true" when pressed', () => {
 			const wrapper = shallowMount(NcButton, { propsData: { ariaLabel: 'button', pressed: true } })
 			const button = wrapper.find('button')

From 144e5360025067f18fa094a62a0fdd7984315244 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 13:40:52 +0100
Subject: [PATCH 2/6] feat(NcActions): Provide `variant` as a replacement of
 the `type` prop

This is done to align with `NcButton`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcActions/NcActions.vue | 76 ++++++++++++++++----------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 5df27ec465..f56853af9a 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -444,12 +444,12 @@ export default {
 </script>
 ```
 
-### Type variants
+### Design variants
 
 ```vue
 <template>
 	<div>
-		<NcActions :type="current">
+		<NcActions :variant="current">
 			<template #icon>
 				<SelectColor :size="20" />
 			</template>
@@ -461,7 +461,7 @@ export default {
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -470,7 +470,7 @@ export default {
 			</NcActionButton>
 		</NcActions>
 
-		<NcActions :type="current" menu-name="Choose a type">
+		<NcActions :variant="current" menu-name="Choose a variant">
 			<NcActionButton v-if="current" close-after-click @click="define()">
 				<template #icon>
 					<Delete :size="20" />
@@ -478,7 +478,7 @@ export default {
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-text--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-text--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -487,7 +487,7 @@ export default {
 			</NcActionButton>
 		</NcActions>
 
-		<NcActions :type="current"  menu-name="Choose a type">
+		<NcActions :variant="current"  menu-name="Choose a variant">
 			<template #icon>
 				<SelectColor :size="20" />
 			</template>
@@ -499,7 +499,7 @@ export default {
 				Remove
 			</NcActionButton>
 
-			<NcActionButton v-for="row in types" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
+			<NcActionButton v-for="row in variants" close-after-click @click="define(row)" :key="`type-icon-text--${row}`">
 				<template #icon>
 					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
 					<SelectColor v-else :size="20" />
@@ -526,7 +526,7 @@ export default {
 	data() {
 		return {
 			current: 'primary',
-			types: [
+			variants: [
 				'primary',
 				'secondary',
 				'tertiary',
@@ -554,7 +554,7 @@ export default {
 		<p>Has buttons, button groups, links and router links, separators, texts. May have checkboxes and radio buttons. Separator can be used to make groups of radio buttons as well.</p>
 		<p><kbd>Arrows</kbd> are used to navigate between items, <kbd>Tab</kbd> is used to navigate to the next UI element on the page.</p>
 		<p>
-			<NcActions aria-label="Email menu" type="tertiary">
+			<NcActions aria-label="Email menu" variant="tertiary">
 				<NcActionButtonGroup>
 					<NcActionButton>
 						<template #icon>
@@ -606,11 +606,11 @@ export default {
 			</NcActions>
 		</p>
 		<p>
-			<NcActions aria-label="Text settings" type="tertiary">
+			<NcActions aria-label="Text settings" variant="tertiary">
 				<template #icon>
 					<FormatTitle :size="20" />
 				</template>
-				<NcActionButtonGroup name="Allignment">
+				<NcActionButtonGroup name="Alignment">
 					<NcActionButton aria-label="Left">
 						<template #icon>
 							<FormatAlignLeft :size="20" />
@@ -658,7 +658,7 @@ export default {
 		<p>Has links or router links. May use text elements, captions and separators.</p>
 		<p>Uses classic <kbd>Tab</kbd> navigation.</p>
 		<p>
-			<NcActions aria-label="Applications navigation" :inline="2" type="tertiary">
+			<NcActions aria-label="Applications navigation" :inline="2" variant="tertiary">
 				<NcActionLink href="/apps/dashboard" icon="icon-category-dashboard-white">
 					Dashboard
 				</NcActionLink>
@@ -696,7 +696,7 @@ export default {
 			</NcActions>
 		</p>
 
-		<h2>Toolip</h2>
+		<h2>Tooltip</h2>
 		<p>Has only text and no interactive elements.</p>
 		<p>
 			<NcActions aria-label="Contact" :inline="1">
@@ -726,7 +726,7 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 
-// Formating icons
+// Formatting icons
 import FormatTitle from 'vue-material-design-icons/FormatTitle.vue'
 import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
 import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
@@ -751,7 +751,7 @@ export default {
 		OpenInNewIcon,
 		DownloadIcon,
 
-		// Formating icons
+		// Formatting icons
 		FormatTitle,
 		FormatAlignLeft,
 		FormatAlignCenter,
@@ -764,7 +764,7 @@ export default {
 	data() {
 		return {
 			selected: false,
-			// Formating
+			// Formatting
 			checked: {
 				bold: true,
 				italic: false,
@@ -965,7 +965,7 @@ const focusableSelector = '.focusable'
 /**
  * The Actions component can be used to display one ore more actions.
  * If only a single action is provided, it will be rendered as an inline icon.
- * For more, a menu indicator will be shown and a popovermenu containing the
+ * For more, a menu indicator will be shown and a popover menu containing the
  * actions will be opened on click.
  *
  * @since 0.10.0
@@ -1074,14 +1074,16 @@ export default {
 		},
 
 		/**
-		 * Specifies the button type used for trigger and single actions buttons
+		 * Specifies the button variant used for trigger and single actions buttons.
+		 *
 		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
 		 * the default button style will be applied.
+		 * @deprecated use `variant` instead - will be removed with v9
 		 */
 		type: {
 			type: String,
 			validator(value) {
-				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
 			},
 			default: null,
 		},
@@ -1158,6 +1160,22 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * Specifies the button variant used for trigger and single actions buttons.
+		 *
+		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+		 * If left empty, the default button style will be applied.
+		 *
+		 * @since 8.23.0
+		 */
+		variant: {
+			type: String,
+			validator(value) {
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)
+			},
+			default: null,
+		},
 	},
 
 	emits: [
@@ -1216,9 +1234,9 @@ export default {
 	},
 
 	computed: {
-		triggerBtnType() {
+		triggerButtonVariant() {
 			// If requested, we use a primary button
-			return this.type || (this.primary
+			return (this.type ?? this.variant) || (this.primary
 				? 'primary'
 				// If it has a name, we use a secondary button
 				: this.menuName ? 'secondary' : 'tertiary')
@@ -1660,7 +1678,7 @@ export default {
 			this.$emit('blur', event)
 
 			// When there is no focusable elements to handle Tab press from actions menu
-			// It requries manual closing
+			// It requires manual closing
 			if (this.actionsMenuSemanticType === 'tooltip') {
 				// Tooltip is supposed to have no focusable element.
 				// However, if there is a custom focusable element, it will be auto-focused and cause the menu to be closed on open.
@@ -1808,12 +1826,12 @@ export default {
 					},
 					ref: action?.data?.ref,
 					props: {
-						// If it has a menuName, we use a secondary button
-						type: this.type || (buttonText ? 'secondary' : 'tertiary'),
+						...propsToForward,
 						disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
 						pressed: action?.componentOptions?.propsData?.modelValue,
-						nativeType,
-						...propsToForward,
+						type: nativeType,
+						// If it has a menuName, we use a secondary button
+						variant: (this.type ?? this.variant) || (buttonText ? 'secondary' : 'tertiary'),
 					},
 					on: {
 						focus: this.onFocus,
@@ -1892,7 +1910,7 @@ export default {
 					h('NcButton', {
 						class: 'action-item__menutoggle',
 						props: {
-							type: this.triggerBtnType,
+							variant: this.triggerButtonVariant,
 							disabled: this.disabled,
 						},
 						slot: 'trigger',
@@ -1968,7 +1986,7 @@ export default {
 				{
 					class: [
 						'action-items',
-						`action-item--${this.triggerBtnType}`,
+						`action-item--${this.triggerButtonVariant}`,
 					],
 				},
 				[
@@ -1999,7 +2017,7 @@ export default {
 			{
 				class: [
 					'action-item action-item--default-popover',
-					`action-item--${this.triggerBtnType}`,
+					`action-item--${this.triggerButtonVariant}`,
 					{
 						'action-item--open': this.opened,
 					},

From 6b282faf163d50c4f95c9c41940573d00e6c7dd5 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 13:41:43 +0100
Subject: [PATCH 3/6] feat(NcChip): Provide `variant` as a replacement for
 `type` prop

To align with `NcButton`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcChip/NcChip.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/NcChip/NcChip.vue b/src/components/NcChip/NcChip.vue
index 89f0565e4d..bef791d7e9 100644
--- a/src/components/NcChip/NcChip.vue
+++ b/src/components/NcChip/NcChip.vue
@@ -10,8 +10,8 @@
 	<div style="display: flex; gap: 8px; flex-wrap: wrap;">
 		<NcChip text="Notes.txt" />
 		<NcChip text="Files" :icon-path="mdiFile" />
-		<NcChip text="Color" type="tertiary" :icon-path="mdiPalette" />
-		<NcChip text="Current time" type="primary" :icon-path="mdiClock" no-close />
+		<NcChip text="Color" :icon-path="mdiPalette" variant="tertiary" />
+		<NcChip text="Current time" :icon-path="mdiClock" no-close variant="primary" />
 	</div>
 </template>
 <script>
@@ -72,7 +72,7 @@ export default {
 <template>
 	<div class="nc-chip"
 		:class="{
-			[`nc-chip--${type}`]: true,
+			[`nc-chip--${realVariant}`]: true,
 			'nc-chip--no-actions': noClose && !hasActions(),
 			'nc-chip--no-icon': !hasIcon(),
 		}">
@@ -94,7 +94,7 @@ export default {
 		<NcActions v-if="canClose || hasActions()"
 			class="nc-chip__actions"
 			:force-menu="!canClose"
-			type="tertiary-no-background">
+			variant="tertiary-no-background">
 			<NcActionButton v-if="canClose"
 				close-after-click
 				@click="onClose">
@@ -137,8 +137,10 @@ const props = defineProps({
 	},
 
 	/**
-	 * Chip style
-	 * This sets the background style of the chip, similar to NcButton's `type`
+	 * Set the chips design variant-
+	 *
+	 * This sets the background style of the chip, similar to NcButton's `variant`.
+	 * @deprecated will be removed with v9 - use `variant` instead.
 	 */
 	type: {
 		type: String,
@@ -170,11 +172,26 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+
+	/**
+	 * Set the chips design variant-
+	 *
+	 * This sets the background style of the chip, similar to NcButton's `variant`.
+	 * @since 8.23.0
+	 */
+	variant: {
+		type: String,
+		default: 'secondary',
+		validator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),
+	},
 })
 
 const emit = defineEmits(['close'])
 const slots = useSlots()
 
+// TODO: Replace with just `variant` in v9
+const realVariant = computed(() => props.type !== 'secondary' ? props.type : props.variant)
+
 const canClose = computed(() => !props.noClose)
 const hasActions = () => Boolean(slots.actions?.())
 const hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())

From c3e106eccdd3c9936f02d5a4cc26b884b609558a Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 13:42:26 +0100
Subject: [PATCH 4/6] feat(NcAppNavigationNew): Provide `variant` as a
 replacement for the `type` prop

To align with `NcButton`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcAppNavigationNew/NcAppNavigationNew.vue  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/NcAppNavigationNew/NcAppNavigationNew.vue b/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
index 7a194ad704..be7dc0d510 100644
--- a/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
+++ b/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
@@ -30,7 +30,7 @@
 	<div class="app-navigation-new">
 		<NcButton :id="buttonId"
 			:disabled="disabled"
-			:type="type"
+			:variant="type !== 'primary' ? type : variant"
 			@click="$emit('click')">
 			<template #icon>
 				<slot name="icon" />
@@ -62,6 +62,10 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		/**
+		 * @deprecated use `variant` instead - will be removed with v9
+		 */
 		type: {
 			type: String,
 			default: 'primary',
@@ -69,6 +73,18 @@ export default {
 				return ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1
 			},
 		},
+
+		/**
+		 * The color variant to use.
+		 * @default 'primary'
+		 */
+		variant: {
+			type: String,
+			default: 'primary',
+			validator(value) {
+				return ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1
+			},
+		}
 	},
 
 	emits: ['click'],

From 09e1e2ef31bb41884baa406f626f394a9d684b9d Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 13:43:49 +0100
Subject: [PATCH 5/6] feat(NcDialogButton): Provide `variant` as a alternative
 for the `type` prop

To align with `NcButton`.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 CHANGELOG.md                                  |  2 +-
 .../NcDialogButton/NcDialogButton.vue         | 27 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 275a2951ee..aaa2824c69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
 
 ### 📝 Notes
 #### `NcButton` color variant and native type
-`NcButton` now provides a `variant` prop to set the color variant to use (e.g. `'primary'`) and allows to set the native button type using the `type` prop.
+`NcButton` (and `NcDialogButton`) now provides a `variant` prop to set the color variant to use (e.g. `'primary'`) and allows to set the native button type using the `type` prop.
 The legacy behavior, `type` for the color variant and `nativeType` for the button type, still works but will be removed in the next major version.
 
 To make a later migration to version 9 easier you can already migrate your `NcButton` usage like this:
diff --git a/src/components/NcDialogButton/NcDialogButton.vue b/src/components/NcDialogButton/NcDialogButton.vue
index 3398f4430a..15c1b8c5f9 100644
--- a/src/components/NcDialogButton/NcDialogButton.vue
+++ b/src/components/NcDialogButton/NcDialogButton.vue
@@ -10,8 +10,9 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 <template>
 	<NcButton :aria-label="label"
 		:disabled="disabled"
-		:native-type="nativeType"
 		:type="type"
+		:native-type="nativeType"
+		:variant="variant"
 		@click="handleClick">
 		{{ label }}
 		<template #icon>
@@ -65,18 +66,21 @@ const props = defineProps({
 	},
 
 	/**
-	 * The button type, see NcButton
-	 * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+	 * The button type, see NcButton.
+	 *
+	 * @deprecated The usage for setting the color variant is deprecated and will be removed with v9.
+	 * @type {'button'|'submit'|'reset'|'primary'|'secondary'|'error'|'warning'|'success'}
 	 */
 	type: {
 		type: String,
 		required: false,
 		default: 'secondary',
-		validator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),
+		validator: (type) => typeof type === 'string' && ['button', 'submit', 'reset', 'primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),
 	},
 
 	/**
-	 * See `nativeType` of `NcButton`
+	 * See `nativeType` of `NcButton`.
+	 * @deprecated use `type` instead - will removed with v9
 	 */
 	nativeType: {
 		type: String,
@@ -94,6 +98,19 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+
+	/**
+	 * The button variant, see NcButton.
+	 *
+	 * @type {'primary'|'secondary'|'tertiary'|'error'|'warning'|'success'}
+	 * @since 8.23.0
+	 */
+	variant: {
+		type: String,
+		required: false,
+		default: 'secondary',
+		validator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),
+	},
 })
 
 const emit = defineEmits(['click'])

From 6912a3cf60d9f2cb3d4c9409d8c84915028144fb Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 29 Jan 2025 13:44:21 +0100
Subject: [PATCH 6/6] refactor: Use `variant` instead of `type` when using
 `NcButton`

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcAppContent/NcAppDetailsToggle.vue        |  6 +++---
 .../NcAppNavigationIconCollapsible.vue         |  2 +-
 .../NcInputConfirmCancel.vue                   | 14 +++++++-------
 .../NcAppNavigationSearch.vue                  |  2 +-
 .../NcAppNavigationToggle.vue                  |  6 +++---
 src/components/NcAppSidebar/NcAppSidebar.vue   | 18 +++++++++---------
 src/components/NcAvatar/NcAvatar.vue           | 10 +++++-----
 src/components/NcBreadcrumb/NcBreadcrumb.vue   |  6 +++---
 src/components/NcColorPicker/NcColorPicker.vue |  6 +++---
 src/components/NcContent/NcContent.vue         |  6 +++---
 src/components/NcEmojiPicker/NcEmojiPicker.vue |  2 +-
 .../NcEmptyContent/NcEmptyContent.vue          |  2 +-
 .../NcHeaderButton/NcHeaderButton.vue          |  4 ++--
 src/components/NcHeaderMenu/NcHeaderMenu.vue   |  6 +++---
 src/components/NcInputField/NcInputField.vue   |  2 +-
 src/components/NcListItem/NcListItem.vue       |  6 +++---
 src/components/NcModal/NcModal.vue             | 16 ++++++++--------
 .../NcRelatedResourcesPanel/NcResource.vue     |  4 ++--
 .../NcTeamResources.vue                        |  6 +++---
 .../NcReferencePickerModal.vue                 |  6 +++---
 src/components/NcSelect/NcSelect.vue           |  4 ++--
 21 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
index d7d7bd75a0..03ebd3d726 100644
--- a/src/components/NcAppContent/NcAppDetailsToggle.vue
+++ b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -5,10 +5,10 @@
 
 <template>
 	<NcButton v-tooltip="title"
-		type="tertiary"
-		:aria-label="title"
 		class="app-details-toggle"
-		:class="{ 'app-details-toggle--mobile': isMobile }">
+		:class="{ 'app-details-toggle--mobile': isMobile }"
+		:aria-label="title"
+		variant="tertiary">
 		<template #icon>
 			<ArrowLeft v-if="isRtl" :size="20" />
 			<ArrowRight v-else :size="20" />
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index b869a495e3..0c3d49557c 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -7,8 +7,8 @@
 	<!-- Button to expand or collapse children -->
 	<NcButton class="icon-collapse"
 		:class="{'icon-collapse--open':open}"
-		type="tertiary"
 		:aria-label="labelButton"
+		variant="tertiary"
 		@click="onClick">
 		<template #icon>
 			<ChevronUp v-if="open"
diff --git a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
index f0d3caae35..b879413445 100644
--- a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
+++ b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
@@ -21,18 +21,18 @@
 				class="app-navigation-input-confirm__input"
 				:placeholder="placeholder">
 
-			<NcButton native-type="submit"
-				type="primary"
-				:aria-label="labelConfirm"
+			<NcButton :aria-label="labelConfirm"
+				type="submit"
+				variant="primary"
 				@click.stop.prevent="confirm">
 				<template #icon>
 					<ArrowRight :size="20" />
 				</template>
 			</NcButton>
 
-			<NcButton native-type="reset"
-				:type="primary ? 'primary' : 'tertiary'"
-				:aria-label="labelCancel"
+			<NcButton :aria-label="labelCancel"
+				type="reset"
+				:variant="primary ? 'primary' : 'tertiary'"
 				@click.stop.prevent="cancel">
 				<template #icon>
 					<Close :size="20" />
@@ -42,11 +42,11 @@
 	</div>
 </template>
 <script>
-import NcButton from '../NcButton/index.js'
 import { t } from '../../l10n.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcInputConfirmCancel',
diff --git a/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
index 75652a0728..ba8b00238b 100644
--- a/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
+++ b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
@@ -31,7 +31,7 @@
 									Filter by year
 								</NcActionButton>
 							</NcActions>
-							<NcButton aria-label="Search globally" type="tertiary">
+							<NcButton aria-label="Search globally" variant="tertiary">
 								<template #icon>
 									<IconSearchGlobal :size="20" />
 								</template>
diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
index 1a89cab9ff..5de9e3d0f1 100644
--- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
+++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -6,12 +6,12 @@
 <template>
 	<div class="app-navigation-toggle-wrapper">
 		<NcButton class="app-navigation-toggle"
-			type="tertiary"
+			aria-controls="app-navigation-vue"
 			:aria-expanded="open ? 'true' : 'false'"
+			:aria-keyshortcuts="disableKeyboardShortcuts ? '' : 'n'"
 			:aria-label="label"
 			:title="label"
-			aria-controls="app-navigation-vue"
-			:aria-keyshortcuts="disableKeyboardShortcuts ? '' : 'n'"
+			variant="tertiary"
 			@click="toggleNavigation">
 			<template #icon>
 				<MenuOpenIcon v-if="open" :size="20" />
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 2ca1199c03..d7ccf3e746 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -379,7 +379,7 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
 	<NcContent app-name="styleguidist" class="content-styleguidist">
 		<NcAppContent>
 			<div class="top-bar">
-				<NcButton type="primary">Start a call</NcButton>
+				<NcButton variant="primary">Start a call</NcButton>
 			</div>
 		</NcAppContent>
 		<!-- The sidebar -->
@@ -548,7 +548,7 @@ export default {
 				<NcButton :aria-label="t('Open sidebar')"
 					class="app-sidebar__toggle"
 					:class="toggleClasses"
-					type="tertiary"
+					variant="tertiary"
 					v-bind="toggleAttrs"
 					@click="$emit('update:open', true)">
 					<template #icon>
@@ -598,7 +598,7 @@ export default {
 									:aria-label="favoriteTranslated"
 									:pressed="isStarred"
 									class="app-sidebar-header__star"
-									type="secondary"
+									variant="secondary"
 									@click.prevent="toggleStarred">
 									<template #icon>
 										<NcLoadingIcon v-if="starLoading" />
@@ -636,9 +636,9 @@ export default {
 											:value="name"
 											@keydown.esc.stop="onDismissEditing"
 											@input="onNameInput">
-										<NcButton type="tertiary-no-background"
-											:aria-label="changeNameTranslated"
-											native-type="submit">
+										<NcButton :aria-label="changeNameTranslated"
+											type="submit"
+											variant="tertiary-no-background">
 											<template #icon>
 												<ArrowRight :size="20" />
 											</template>
@@ -666,10 +666,10 @@ export default {
 				</div>
 
 				<NcButton ref="closeButton"
-					:title="closeTranslated"
 					:aria-label="closeTranslated"
-					type="tertiary"
+					:title="closeTranslated"
 					class="app-sidebar__close"
+					variant="tertiary"
 					@click.prevent="closeSidebar">
 					<template #icon>
 						<Close :size="20" />
@@ -704,9 +704,9 @@ import { Portal as Teleport } from '@linusborg/vue-simple-portal'
 
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcButton from '../NcButton/index.js'
 import NcEmptyContent from '../NcEmptyContent/index.js'
+import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 633960c6c4..51089c3404 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -175,9 +175,9 @@ export default {
 		<!-- Contact menu -->
 		<!-- We show a button if the menu is not loaded yet. -->
 		<NcButton v-if="hasMenu && menu.length === 0"
-			type="tertiary-no-background"
-			class="action-item action-item__menutoggle"
 			:aria-label="avatarAriaLabel"
+			class="action-item action-item__menutoggle"
+			variant="tertiary-no-background"
 			@click="toggleMenu">
 			<template #icon>
 				<NcLoadingIcon v-if="contactsMenuLoading" />
@@ -185,12 +185,12 @@ export default {
 			</template>
 		</NcButton>
 		<NcActions v-else-if="hasMenu"
+			:aria-label="avatarAriaLabel"
+			:container="menuContainer"
 			force-menu
 			manual-open
-			type="tertiary-no-background"
-			:container="menuContainer"
 			:open.sync="contactsMenuOpenState"
-			:aria-label="avatarAriaLabel"
+			variant="tertiary-no-background"
 			@click="toggleMenu">
 			<component :is="item.ncActionComponent"
 				v-for="(item, key) in menu"
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 50e6dd2229..24823f31f9 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -24,9 +24,9 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
 		<NcButton v-if="(name || icon || $slots.icon) && !$slots.default"
-			:title="title"
 			:aria-label="icon ? name : undefined"
-			type="tertiary"
+			:title="title"
+			variant="tertiary"
 			v-bind="linkAttributes"
 			v-on="$listeners">
 			<template v-if="$slots.icon || icon" #icon>
@@ -41,13 +41,13 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 		</NcButton>
 		<NcActions v-if="$slots.default"
 			ref="actions"
-			type="tertiary"
 			:force-menu="forceMenu"
 			:open="open"
 			:menu-name="name"
 			:title="title"
 			:force-name="true"
 			:container="`.vue-crumb[${crumbId}]`"
+			variant="tertiary"
 			@update:open="onOpenChange">
 			<template #icon>
 				<!-- @slot Slot for the custom menu icon -->
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index f303266f25..894e1a7c9f 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -181,22 +181,22 @@ export default {
 				</Transition>
 				<div v-if="!paletteOnly" class="color-picker__navigation">
 					<NcButton v-if="advanced"
-						type="tertiary"
 						:aria-label="ariaBack"
+						variant="tertiary"
 						@click="handleBack">
 						<template #icon>
 							<ArrowLeft :size="20" />
 						</template>
 					</NcButton>
 					<NcButton v-else
-						type="tertiary"
 						:aria-label="ariaMore"
+						variant="tertiary"
 						@click="handleMoreSettings">
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
 					</NcButton>
-					<NcButton type="primary"
+					<NcButton variant="primary"
 						@click="handleConfirm(slotProps.hide)">
 						{{ t('Choose') }}
 					</NcButton>
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index 840668f035..beb9a14115 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -63,15 +63,15 @@ It also will set the skip content buttons needed for accessibility.
 				</div>
 				<div class="vue-skip-actions__buttons">
 					<NcButton v-show="hasAppNavigation"
-						type="tertiary"
 						href="#app-navigation-vue"
+						variant="tertiary"
 						@click.prevent="openAppNavigation"
 						@focusin="currentFocus = 'navigation'"
 						@mouseover="currentFocus = 'navigation'">
 						{{ t('Skip to app navigation') }}
 					</NcButton>
-					<NcButton type="tertiary"
-						href="#app-content-vue"
+					<NcButton href="#app-content-vue"
+						variant="tertiary"
 						@focusin="currentFocus = 'content'"
 						@mouseover="currentFocus = 'content'">
 						{{ t('Skip to main content') }}
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 884b88fe1f..e84ba6c11d 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -162,7 +162,7 @@ This component allows the user to pick an emoji.
 						:palette="skinTonePalette"
 						:value="currentColor.color"
 						@update:value="onChangeSkinTone">
-						<NcButton :aria-label="t('Skin tone')" type="tertiary-no-background">
+						<NcButton :aria-label="t('Skin tone')" variant="tertiary-no-background">
 							<template #icon>
 								<IconCircle :style="{ color: currentColor.color }" :title="currentColor.name" :size="20" />
 							</template>
diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
index 2c21ccab5b..1e2d0ef749 100644
--- a/src/components/NcEmptyContent/NcEmptyContent.vue
+++ b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -74,7 +74,7 @@ consider only using header elements as the root elements for the name slot.
 			</h1>
 		</template>
 		<template #action>
-			<NcButton type="primary">
+			<NcButton variant="primary">
 				Add a comment!
 			</NcButton>
 		</template>
diff --git a/src/components/NcHeaderButton/NcHeaderButton.vue b/src/components/NcHeaderButton/NcHeaderButton.vue
index 11dce01ec4..3a86fa11df 100644
--- a/src/components/NcHeaderButton/NcHeaderButton.vue
+++ b/src/components/NcHeaderButton/NcHeaderButton.vue
@@ -64,11 +64,11 @@ export default {
 <template>
 	<!-- We need a wrapper for server styles to apply -->
 	<div :id="id" class="header-menu">
-		<NcButton type="tertiary-no-background"
-			class="header-menu__trigger"
+		<NcButton class="header-menu__trigger"
 			:aria-label="ariaLabel"
 			:aria-describedby="descriptionId"
 			size="large"
+			variant="tertiary-no-background"
 			@click.prevent="$emit('click', $event)">
 			<template #icon>
 				<!-- @slot Icon trigger slot. Make sure the svg path
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index 1994c614c5..69c318478f 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -68,13 +68,13 @@ export default {
 		<!-- Trigger -->
 		<NcButton :id="isNav ? triggerId : null"
 			ref="trigger"
-			type="tertiary-no-background"
 			class="header-menu__trigger"
-			:aria-label="ariaLabel"
-			:aria-describedby="description ? descriptionId : null"
 			:aria-controls="`header-menu-${id}`"
+			:aria-describedby="description ? descriptionId : null"
 			:aria-expanded="opened.toString()"
+			:aria-label="ariaLabel"
 			size="large"
+			variant="tertiary-no-background"
 			@click.prevent="toggleMenu">
 			<template #icon>
 				<!-- @slot Icon trigger slot. Make sure the svg path
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 70d6c86e1a..59b39b62f1 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -61,10 +61,10 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 
 			<!-- trailing button -->
 			<NcButton v-if="showTrailingButton"
-				type="tertiary-no-background"
 				class="input-field__trailing-button"
 				:aria-label="trailingButtonLabel"
 				:disabled="disabled"
+				variant="tertiary-no-background"
 				@click="handleTrailingButtonClick">
 				<!-- Populating this slot creates a trailing button within the
 				input boundaries that emits a `trailing-button-click` event -->
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 62994af61c..b90b44eb2d 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -284,7 +284,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #extra-actions>
-				<NcButton type="primary">
+				<NcButton variant="primary">
 					<template #icon>
 						<IconCog :size="20" />
 					</template>
@@ -312,12 +312,12 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #extra-actions>
-				<NcButton type="tertiary">
+				<NcButton variant="tertiary">
 					<template #icon>
 						<IconPencil :size="20" />
 					</template>
 				</NcButton>
-				<NcButton type="tertiary">
+				<NcButton variant="tertiary">
 					<template #icon>
 						<IconCog :size="20" />
 					</template>
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index b33b96cd5b..400d02cc57 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -84,7 +84,7 @@ export default {
 				<NcButton
 					:disabled="!firstName || !lastName || !pizza"
 					@click="closeModal"
-					type="primary">
+					variant="primary">
 					Submit
 				</NcButton>
 			</div>
@@ -261,7 +261,7 @@ export default {
 						<NcButton v-if="canClose && !closeButtonContained"
 							:aria-label="closeButtonAriaLabel"
 							class="header-close"
-							type="tertiary"
+							variant="tertiary"
 							@click="close">
 							<template #icon>
 								<Close :size="20" />
@@ -283,9 +283,9 @@ export default {
 					<!-- Navigation button -->
 					<transition name="fade-visibility" appear>
 						<NcButton v-show="hasPrevious"
-							type="tertiary-no-background"
-							class="prev"
 							:aria-label="prevButtonAriaLabel"
+							class="prev"
+							variant="tertiary-no-background"
 							@click="previous">
 							<template #icon>
 								<ChevronLeft :size="40" />
@@ -301,9 +301,9 @@ export default {
 						</div>
 						<!-- Close modal -->
 						<NcButton v-if="canClose && closeButtonContained"
-							type="tertiary"
-							class="modal-container__close"
 							:aria-label="closeButtonAriaLabel"
+							class="modal-container__close"
+							variant="tertiary"
 							@click="close">
 							<template #icon>
 								<Close :size="20" />
@@ -314,9 +314,9 @@ export default {
 					<!-- Navigation button -->
 					<transition name="fade-visibility" appear>
 						<NcButton v-show="hasNext"
-							type="tertiary-no-background"
-							class="next"
 							:aria-label="nextButtonAriaLabel"
+							class="next"
+							variant="tertiary-no-background"
 							@click="next">
 							<template #icon>
 								<ChevronRight :size="40" />
diff --git a/src/components/NcRelatedResourcesPanel/NcResource.vue b/src/components/NcRelatedResourcesPanel/NcResource.vue
index 2341fdf9e3..a10e37bc7d 100644
--- a/src/components/NcRelatedResourcesPanel/NcResource.vue
+++ b/src/components/NcRelatedResourcesPanel/NcResource.vue
@@ -7,9 +7,9 @@
 	<li class="resource">
 		<NcButton class="resource__button"
 			:aria-label="labelTranslated"
-			type="tertiary"
 			:to="route"
-			:href="route ? null : url">
+			:href="route ? null : url"
+			variant="tertiary">
 			<template #icon>
 				<div class="resource__icon">
 					<img :src="icon">
diff --git a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
index 4bf562a3aa..85bbb7b5a3 100644
--- a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
+++ b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
@@ -18,10 +18,10 @@
 					<AccountGroup :size="20" />
 					{{ team.displayName }}
 				</h5>
-				<NcButton type="tertiary"
+				<NcButton :aria-label="t('View team')"
 					:href="team.link"
-					:aria-label="t('View team')"
-					:title="t('View team')">
+					:title="t('View team')"
+					variant="tertiary">
 					<template #icon>
 						<OpenInNew :size="20" />
 					</template>
diff --git a/src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue b/src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue
index dc1f03f80c..1f6bb50a35 100644
--- a/src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue
@@ -20,10 +20,10 @@
 					<ArrowLeftIcon />
 				</template>
 			</NcButton>
-			<NcButton :aria-label="closeButtonLabel"
+			<NcButton class="close-button"
+				:aria-label="closeButtonLabel"
 				:title="closeButtonTitle"
-				type="tertiary"
-				class="close-button"
+				variant="tertiary"
 				@click="onCancel">
 				<template #icon>
 					<CloseIcon />
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 573a220672..6bdeb56969 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -161,7 +161,7 @@ export default {
 				:options="options"
 				v-model="singleValue"
 				required />
-			<NcButton native-type="submit">Submit</NcButton>
+			<NcButton type="submit">Submit</NcButton>
 		</form>
 
 		<form class="container__form" @submit.prevent>
@@ -171,7 +171,7 @@ export default {
 				v-model="multiValue"
 				multiple
 				required />
-			<NcButton native-type="submit">Submit</NcButton>
+			<NcButton type="submit">Submit</NcButton>
 		</form>
 	</div>
 </template>