1 files changed, 64 insertions, 0 deletions
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue
new file mode 100644
index 00000000000..dbc446b3d90
--- /dev/null
+++ b/core/src/components/Profile/PrimaryActionButton.vue
@@ -0,0 +1,64 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcButton type="primary"
+		:href="href"
+		alignment="center"
+		:target="target"
+		:disabled="disabled">
+		<template #icon>
+			<img class="icon"
+				aria-hidden="true"
+				:src="icon"
+				alt="">
+		</template>
+		<slot />
+	</NcButton>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { t } from '@nextcloud/l10n'
+import NcButton from '@nextcloud/vue/components/NcButton'
+
+export default defineComponent({
+	name: 'PrimaryActionButton',
+
+	components: {
+		NcButton,
+	},
+
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		href: {
+			type: String,
+			required: true,
+		},
+		icon: {
+			type: String,
+			required: true,
+		},
+		target: {
+			type: String,
+			required: true,
+			validator: (value) => ['_self', '_blank', '_parent', '_top'].includes(value),
+		},
+	},
+
+	methods: {
+		t,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+	.icon {
+		filter: var(--primary-invert-if-dark);
+	}
+</style>