From 1b5c7b53d914adfc0c5e742ac8db93e5c7e837cd Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 30 Aug 2024 20:01:19 +0200
Subject: [PATCH] feat: Refactor `NcButton`

1. Make it a template component instead of a render function
2. Add a `text` prop to allow passing text content as prop
3. Add `noIconAriaHidden` to allow making the icon appear on the accessible tree

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcButton/NcButton.vue          | 642 ++----------------
 .../NcButton/NcButtonImplementation.vue       | 404 +++++++++++
 src/components/NcButton/NcButtonWrapper.vue   |   9 +
 src/components/NcButton/types.ts              | 164 +++++
 styleguide.config.cjs                         |   1 +
 5 files changed, 646 insertions(+), 574 deletions(-)
 create mode 100644 src/components/NcButton/NcButtonImplementation.vue
 create mode 100644 src/components/NcButton/NcButtonWrapper.vue

diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index fb59dc5543..2b98b50849 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -37,44 +37,44 @@ It can be used with one or multiple actions.
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
+			:text="text"
 			type="tertiary-no-background">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
 			</template>
-			<template v-if="style.indexOf('text') !== -1">Example text</template>
 		</NcButton>
 		<NcButton
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
+			:text="text"
 			type="tertiary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
 			</template>
-			<template v-if="style.indexOf('text') !== -1">Example text</template>
 		</NcButton>
 		<NcButton
 			aria-label="Example text"
 			:disabled="disabled"
-			:size="size">
+			:size="size"
+			:text="text">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
 			</template>
-			<template v-if="style.indexOf('text') !== -1">Example text</template>
 		</NcButton>
 		<NcButton
 			aria-label="Example text"
 			:disabled="disabled"
 			:size="size"
+			:text="text"
 			type="primary">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
 					:size="20" />
 			</template>
-			<template v-if="style.indexOf('text') !== -1">Example text</template>
 		</NcButton>
 	</div>
 
@@ -83,13 +83,13 @@ It can be used with one or multiple actions.
 	<NcButton
 		:disabled="disabled"
 		:size="size"
+		:text="text"
 		:wide="true"
 		text="Example text">
 		<template #icon>
 			<Video
 				:size="20" />
 		</template>
-		Example text
 	</NcButton>
 
 	<!-- Special buttons -->
@@ -102,32 +102,32 @@ It can be used with one or multiple actions.
 		<NcButton
 			:disabled="disabled"
 			:size="size"
+			text="Example text"
 			type="success">
 			<template #icon>
 				<Video
 					:size="20" />
 			</template>
-			Example text
 		</NcButton>
 		<NcButton
 			:disabled="disabled"
 			:size="size"
+			text="Example text"
 			type="warning">
 			<template #icon>
 				<Video
 					:size="20" />
 			</template>
-			Example text
 		</NcButton>
 		<NcButton
 			:disabled="disabled"
 			:size="size"
+			text="Example text"
 			type="error">
 			<template #icon>
 				<Video
 					:size="20" />
 			</template>
-			Example text
 		</NcButton>
 		<p> - </p>
 	</div>
@@ -148,7 +148,14 @@ export default {
 			size: 'normal',
 			style: 'icontext',
 		}
-	}
+	},
+	computed: {
+		text() {
+			if (this.style.includes('text')) {
+				return 'Example text'
+			}
+		},
+	},
 }
 </script>
 
@@ -189,45 +196,39 @@ 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 text="center (default)" type="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" text="center-reverse" type="secondary" wide>
 			<template #icon>
 				<IconRight :size="20" />
 			</template>
-			center-reverse
 		</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" text="start" type="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" text="start-reverse" type="secondary" wide>
 					<template #icon>
 						<IconRight :size="20" />
 					</template>
-					start-reverse
 				</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" text="end" type="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" text="end-reverse" type="secondary" wide>
 					<template #icon>
 						<IconRight :size="20" />
 					</template>
-					end-reverse
 				</NcButton>
 			</div>
 		</div>
@@ -263,12 +264,11 @@ Do not change `text` or `aria-label` of the pressed/unpressed button. See: https
 					<IconStarOutline v-else :size="20" />
 				</template>
 			</NcButton>
-			<NcButton v-model:pressed="isFavorite" type="tertiary">
+			<NcButton v-model:pressed="isFavorite" text="Favorite" type="tertiary">
 				<template #icon>
 					<IconStar v-if="isFavorite" :size="20" />
 					<IconStarOutline v-else :size="20" />
 				</template>
-				Favorite
 			</NcButton>
 			<NcButton v-model:pressed="isFavorite" aria-label="Favorite">
 				<template #icon>
@@ -305,6 +305,21 @@ export default {
 </script>
 ```
 
+### Usage example: Custom content
+Sometimes custom content, meaning more than text and icon, is required.
+For this the `default`-slot can be used.
+
+**Important**: Never include interactive elements inside the button,
+this results in invalid HTML and is not accessible!
+
+```vue
+<template>
+	<NcButton>
+		Some <del>formatted</del> content
+	</NcButton>
+</template>
+```
+
 ### Usage example: Sorting table columns
 The standard way to implement sortable table column headers should be like this:
 
@@ -415,558 +430,37 @@ td.row-size {
 }
 </style>
 ```
-
 </docs>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import { defineComponent, h, resolveComponent } from 'vue'
-import { ButtonAlignment, ButtonNativeType, ButtonType } from './types'
-import isSlotPopulated from '../../utils/isSlotPopulated'
-
-export default defineComponent({
-	name: 'NcButton',
-
-	inject: {
-		getNcPopoverTriggerAttrs: {
-			from: 'NcPopover:trigger:attrs',
-			default: () => () => ({}),
-		},
-	},
-
-	props: {
-		/**
-		 * Set the text and icon alignment
-		 *
-		 * @default 'center'
-		 * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}
-		 */
-		alignment: {
-			type: String as PropType<ButtonAlignment>,
-			default: ButtonAlignment.Center,
-			validator(value: string) {
-				return Object.values(ButtonAlignment).includes(value as ButtonAlignment)
-			},
-		},
-
-		/**
-		 * Toggles the disabled state of the button on and off.
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Specify the button size
-		 * Accepted values: `'small'`, `'normal'` (default), `'large'`
-		 */
-		size: {
-			type: String,
-			default: 'normal',
-			validator(value: string) {
-				return ['small', 'normal', 'large'].includes(value)
-			},
-		},
-
-		/**
-		 * Specifies the button type
-		 * If left empty, the default button style will be applied.
-		 *
-		 * @default 'secondary'
-		 * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}
-		 */
-		type: {
-			type: String as PropType<ButtonType>,
-			default: ButtonType.Secondary,
-			validator(value: string) {
-				return Object.values(ButtonType).includes(value as ButtonType)
-			},
-		},
-
-		/**
-		 * Specifies the button native type
-		 * If left empty, the default "button" type will be used.
-		 *
-		 * @default 'button'
-		 * @type {'submit' | 'reset' | 'button'}
-		 */
-		nativeType: {
-			type: String as PropType<ButtonNativeType>,
-			default: ButtonNativeType.Button,
-			validator(value: string) {
-				return Object.values(ButtonNativeType).includes(value as ButtonNativeType)
-			},
-		},
-
-		/**
-		 * Specifies whether the button should span all the available width.
-		 * By default, buttons span the whole width of the container.
-		 */
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Always try to provide an aria-label to your button. Make it more
-		 * specific than the button's name by provide some more context. E.g. if
-		 * the name of the button is "send" in the Mail app, the aria label could
-		 * be "Send email".
-		 */
-		ariaLabel: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Providing the href attribute turns the button component into an `a`
-		 * element.
-		 */
-		href: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Target for the `a` element if `href` is set.
-		 * @default '_self'
-		 */
-		target: {
-			type: String,
-			default: '_self',
-		},
-
-		/**
-		 * Providing the download attribute with href downloads file when clicking.
-		 */
-		download: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Providing the to attribute turns the button component into a `router-link`
-		 * element. Takes precedence over the href attribute.
-		 */
-		to: {
-			type: [String, Object],
-			default: null,
-		},
-
-		/**
-		 * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
-		 * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
-		 * otherwise root element will inherit incorrect aria-hidden.
-		 */
-		ariaHidden: {
-			type: Boolean,
-			default: null,
-		},
-
-		/**
-		 * The pressed state of the button if it has a checked state
-		 * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.
-		 *
-		 * Pressed state is not supported for links
-		 */
-		pressed: {
-			type: Boolean,
-			default: null,
-		},
-	},
-
-	emits: ['update:pressed', 'click'],
-
-	computed: {
-		/**
-		 * 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() {
-			// 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') {
-				return 'secondary'
-			}
-			return this.type
-		},
-
-		/**
-		 * The flexbox alignment of the button content
-		 */
-		flexAlignment() {
-			return this.alignment.split('-')[0]
-		},
-
-		/**
-		 * If the button content should be reversed (icon on the end)
-		 */
-		isReverseAligned() {
-			return this.alignment.includes('-')
-		},
-
-		ncPopoverTriggerAttrs() {
-			return (this.getNcPopoverTriggerAttrs as () => Record<string, string|undefined>)()
-		},
-	},
+<template>
+	<component :is="to ? 'router-link' : NcButtonWrapper"
+		v-slot="{ isActive, href, navigate }"
+		custom
+		:to="to">
+		<NcButtonImplementation v-bind="$props"
+			:is-active="isActive"
+			:href="href"
+			:navigate="navigate"
+			@click="(event) => $emit('click', event)"
+			@update:pressed="(pressed) => $emit('update:pressed', pressed)">
+			<template #default>
+				<!-- @slot Custom main content of the button. Note that this **must not** contain any interactive elements -->
+				<slot />
+			</template>
+			<template #icon>
+				<!-- @slot Custom button icon -->
+				<slot name="icon" />
+			</template>
+		</NcButtonImplementation>
+	</component>
+</template>
 
-	/**
-	 * The render function to display the component
-	 *
-	 * @return {object|undefined} The created VNode
-	 */
-	render() {
-		const hasText = isSlotPopulated(this.$slots.default?.())
-		const hasIcon = isSlotPopulated(this.$slots.icon?.())
-
-		/**
-		 * Always fill either the text prop or the ariaLabel one.
-		 */
-		if (!hasText && !this.ariaLabel) {
-			console.warn('You need to fill either the text or the ariaLabel props in the button component.', {
-				text: this.$slots.default?.()?.[0]?.children,
-				ariaLabel: this.ariaLabel,
-			},
-			this)
-		}
+<script setup lang="ts">
+import type { NcButtonEmits } from './types'
+import { NcButtonProps } from './types'
+import NcButtonImplementation from './NcButtonImplementation.vue'
+import NcButtonWrapper from './NcButtonWrapper.vue'
 
-		const isLink = (this.to || this.href)
-
-		const hasPressed = !isLink && typeof this.pressed === 'boolean'
-
-		const renderButton = ({ href, navigate, isActive }: {href?: string, navigate?: (ev: Event) => void, isActive?: boolean } = {}) => h(isLink ? 'a' : 'button',
-			{
-				class: [
-					'button-vue',
-					`button-vue--size-${this.size}`,
-					{
-						'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--wide': this.wide,
-						[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',
-						'button-vue--reverse': this.isReverseAligned,
-						active: isActive,
-					},
-				],
-				'aria-label': this.ariaLabel,
-				'aria-pressed': hasPressed ? this.pressed.toString() : undefined,
-				disabled: this.disabled,
-				type: isLink ? null : this.nativeType,
-				role: isLink ? 'button' : null,
-				href: this.to ? href : (this.href || null),
-				target: isLink ? this.target : null,
-				rel: isLink ? 'nofollow noreferrer noopener' : null,
-				download: (!this.to && this.href && this.download) ? this.download : null,
-				// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes
-				...this.ncPopoverTriggerAttrs,
-				onClick: ($event) => {
-					// Update pressed prop on click if it is set
-					if (hasPressed) {
-						/**
-						 * Update the current pressed state of the button (if the `pressed` property was configured)
-						 *
-						 * @property {boolean} newValue The new `pressed`-state
-						 */
-						this.$emit('update:pressed', !this.pressed)
-					}
-					// We have to both navigate and emit the click event
-					this.$emit('click', $event)
-					navigate?.($event)
-				},
-			},
-			[
-				h('span', { class: 'button-vue__wrapper' }, [
-					hasIcon
-						? h('span', {
-							class: 'button-vue__icon',
-							attrs: {
-								'aria-hidden': 'true',
-							},
-						},
-						[this.$slots.icon?.()],
-						)
-						: null,
-					hasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default?.()]) : null,
-				]),
-			],
-		)
-
-		// If we have a router-link, we wrap the button in it
-		if (this.to) {
-			return h(resolveComponent('router-link'), {
-				custom: true,
-				to: this.to,
-			}, {
-				default: renderButton,
-			})
-		}
-		// Otherwise we simply return the button
-		return renderButton()
-	},
-})
+defineEmits<NcButtonEmits>()
+defineProps(NcButtonProps)
 </script>
-
-<style lang="scss" scoped>
-.button-vue {
-	// Setup different button sizes
-	--button-size: var(--default-clickable-area);
-	--button-radius: var(--border-radius-element, calc(var(--button-size) / 2));
-	--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));
-
-	&--size-small {
-		--button-size: var(--clickable-area-small, 24px);
-		--button-radius: var(--border-radius); // make the border radius even smaller for small buttons
-	}
-
-	&--size-large {
-		--button-size: var(--clickable-area-large, 48px);
-	}
-
-	// General styles
-	position: relative;
-	width: fit-content;
-	overflow: hidden;
-	border: 0;
-	padding: 0;
-	font-size: var(--default-font-size);
-	font-weight: bold;
-	min-height: var(--button-size);
-	min-width: var(--button-size);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	// Cursor pointer on element and all children
-	cursor: pointer;
-	& *,
-	span {
-		cursor: pointer;
-	}
-	border-radius: var(--button-radius);
-	transition-property: color, border-color, background-color;
-	transition-duration: 0.1s;
-	transition-timing-function: linear;
-
-	// No outline feedback for focus. Handled with a toggled class in js (see data)
-	&:focus {
-		outline: none;
-	}
-
-	&:disabled {
-		cursor: default;
-		& * {
-			cursor: default;
-		}
-		opacity: $opacity_disabled;
-		// Gives a wash out effect
-		filter: saturate($opacity_normal);
-	}
-
-	// Default button type
-	color: var(--color-primary-element-light-text);
-	background-color: var(--color-primary-element-light);
-	&:hover:not(:disabled) {
-		background-color: var(--color-primary-element-light-hover);
-	}
-
-	// Back to the default color for this button when active
-	// TODO: add ripple effect
-	&:active {
-		background-color: var(--color-primary-element-light);
-	}
-
-	&__wrapper {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-	}
-
-	&--end &__wrapper {
-		justify-content: end;
-	}
-	&--start &__wrapper {
-		justify-content: start;
-	}
-	&--reverse &__wrapper {
-		flex-direction: row-reverse;
-	}
-
-	&--reverse#{&}--icon-and-text {
-		padding-inline: var(--button-padding) var(--default-grid-baseline);
-	}
-
-	&__icon {
-		height: var(--button-size);
-		width: var(--button-size);
-		min-height: var(--button-size);
-		min-width: var(--button-size);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	// For small buttons we need to adjust the icon size
-	&--size-small &__icon {
-		:deep(> *) {
-			max-height: 16px;
-			max-width: 16px;
-		}
-		:deep(svg) {
-			height: 16px;
-			width: 16px;
-		}
-	}
-
-	&__text {
-		font-weight: bold;
-		margin-bottom: 1px;
-		padding: 2px 0;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
-
-	// Icon-only button
-	&--icon-only {
-		line-height: 1;
-		width: var(--button-size) !important;
-	}
-
-	// Text-only button
-	&--text-only {
-		padding: 0 var(--button-padding);
-		& .button-vue__text {
-			margin-left: 4px;
-			margin-right: 4px;
-		}
-	}
-
-	// Icon and text button
-	&--icon-and-text {
-		// icon and text means the icon adds "visual" padding thus we need to adjust the text padding
-		--button-padding: min(calc(var(--default-grid-baseline) + var(--button-radius)), calc(var(--default-grid-baseline) * 4));
-		// Adjust padding as the icon already got some padding we need to reduce the padding on the icon side and only add larger padding to the text side
-		padding-block: 0;
-		padding-inline: var(--default-grid-baseline) var(--button-padding);
-	}
-
-	// Wide button spans the whole width of the container
-	&--wide {
-		width: 100%;
-	}
-
-	&:focus-visible {
-		outline: 2px solid var(--color-main-text) !important;
-		box-shadow: 0 0 0 4px var(--color-main-background) !important;
-		&.button-vue--vue-tertiary-on-primary {
-			outline: 2px solid var(--color-primary-element-text);
-			border-radius: var(--border-radius-element, var(--border-radius));
-			background-color: transparent;
-		}
-	}
-
-	// Button types
-
-	// Primary
-	&--vue-primary {
-		background-color: var(--color-primary-element);
-		color: var(--color-primary-element-text);
-		&:hover:not(:disabled) {
-			background-color: var(--color-primary-element-hover);
-		}
-		// Back to the default color for this button when active
-		// TODO: add ripple effect
-		&:active {
-			background-color: var(--color-primary-element);
-		}
-	}
-
-	// Secondary
-	&--vue-secondary {
-		color: var(--color-primary-element-light-text);
-		background-color: var(--color-primary-element-light);
-		&:hover:not(:disabled) {
-			color: var(--color-primary-element-light-text);
-			background-color: var(--color-primary-element-light-hover);
-		}
-	}
-
-	// Tertiary
-	&--vue-tertiary {
-		color: var(--color-main-text);
-		background-color: transparent;
-		&:hover:not(:disabled) {
-			background-color: var(--color-background-hover);
-		}
-	}
-
-	// Tertiary, no background
-	&--vue-tertiary-no-background {
-		color: var(--color-main-text);
-		background-color: transparent;
-		&:hover:not(:disabled) {
-			background-color: transparent;
-		}
-	}
-
-	// Tertiary on primary color (like the header)
-	&--vue-tertiary-on-primary {
-		color: var(--color-primary-element-text);
-		background-color: transparent;
-
-		&:hover:not(:disabled) {
-			background-color: transparent;
-		}
-	}
-
-	// Success
-	&--vue-success {
-		background-color: var(--color-success);
-		color: white;
-		&:hover:not(:disabled) {
-			background-color: var(--color-success-hover);
-		}
-		// Back to the default color for this button when active
-		// : add ripple effect
-		&:active {
-			background-color: var(--color-success);
-		}
-	}
-
-	// Warning
-	&--vue-warning {
-		background-color: var(--color-warning);
-		color: white;
-		&:hover:not(:disabled) {
-			background-color: var(--color-warning-hover);
-		}
-		// Back to the default color for this button when active
-		// TODO: add ripple effect
-		&:active {
-			background-color: var(--color-warning);
-		}
-	}
-
-	// Error
-	&--vue-error {
-		background-color: var(--color-error);
-		color: white;
-		&:hover:not(:disabled) {
-			background-color: var(--color-error-hover);
-		}
-		// Back to the default color for this button when active
-		// TODO: add ripple effect
-		&:active {
-			background-color: var(--color-error);
-		}
-	}
-}
-
-</style>
diff --git a/src/components/NcButton/NcButtonImplementation.vue b/src/components/NcButton/NcButtonImplementation.vue
new file mode 100644
index 0000000000..5a96e0335d
--- /dev/null
+++ b/src/components/NcButton/NcButtonImplementation.vue
@@ -0,0 +1,404 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<component :is="isLink ? 'a' : 'button'"
+		:aria-label="ariaLabel"
+		:aria-pressed="hasPressedState ? String(pressed) : undefined"
+		:class="[
+			'button-vue',
+			`button-vue--size-${size}`,
+			{
+				[`button-vue--vue-${realType}`]: realType,
+				'button-vue--wide': wide,
+				[`button-vue--${flexAlignment}`]: flexAlignment !== 'center',
+				'button-vue--reverse': isReverseAligned,
+				active: isActive,
+			},
+		]"
+		:disabled="disabled"
+		:type="isLink ? undefined : nativeType"
+		:role="isLink ? 'button' : undefined"
+		:href="href"
+		:target="isLink ? target : undefined"
+		:rel="isLink ? 'nofollow noreferrer noopener' : undefined"
+		:download="(!to && href && download) ? download : undefined"
+		v-bind="ncPopoverTriggerAttrs"
+		@click="onClick">
+		<span class="button-vue__wrapper">
+			<span v-if="hasIcon()"
+				:aria-hidden="noIconAriaHidden ? undefined : 'true'"
+				class="button-vue__icon">
+				<slot name="icon" />
+			</span>
+			<span v-if="hasText()" class="button-vue__text">
+				<slot name="default">{{ text }}</slot>
+			</span>
+		</span>
+	</component>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { NcButtonEmits } from './types'
+
+import { computed, inject, useSlots, watch } from 'vue'
+import { NcButtonProps } from './types'
+import isSlotPopulated from '../../utils/isSlotPopulated'
+import logger from '../../utils/logger'
+
+const props = defineProps({
+	// NcButton props
+	...NcButtonProps,
+
+	// router link props
+	isActive: {
+		type: Boolean,
+		default: false,
+	},
+	navigate: {
+		type: Function as PropType<(e: MouseEvent) => void>,
+		default: () => () => {},
+	},
+})
+const emit = defineEmits<NcButtonEmits>()
+
+/**
+ * If this is a link (<a>) element
+ */
+const isLink = computed(() => props.to || props.href)
+
+/**
+ * If the button has a pressed state (only if not a link)
+ */
+const hasPressedState = computed(() => !isLink.value && typeof props.pressed === 'boolean')
+
+/**
+ * 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.
+ */
+const realType = computed(() => {
+	// Force *primary* when pressed
+	if (props.pressed) {
+		return 'primary'
+	}
+	// If not pressed but button is configured as stateful button then the type must not be primary
+	if (props.pressed === false && props.type === 'primary') {
+		return 'secondary'
+	}
+	return props.type
+})
+
+/**
+ * The flexbox alignment of the button content
+ */
+const flexAlignment = computed(() => props.alignment.split('-')[0])
+
+/**
+ * If the button content should be reversed (icon on the end)
+ */
+const isReverseAligned = computed(() => props.alignment.includes('-'))
+
+const getNcPopoverTriggerAttrs = inject<() => Record<string, string|undefined>>('NcPopover:trigger:attrs', () => ({}), false)
+const ncPopoverTriggerAttrs = computed(() => getNcPopoverTriggerAttrs())
+
+const slots = useSlots()
+
+/**
+ * Check if the button has a text content (function because slots are not reactive)
+ */
+function hasText(): boolean {
+	return Boolean(props.text) || isSlotPopulated(slots.default?.())
+}
+
+/**
+ * Check if the button has an icon (function because slots are not reactive)
+ */
+function hasIcon(): boolean {
+	return isSlotPopulated(slots.icon?.())
+}
+
+/**
+ * Handle the click on the link / button
+ * @param event The mouse click event
+ */
+function onClick(event: MouseEvent) {
+	if (hasPressedState.value) {
+		/**
+		 * Update the current pressed state of the button (if the `pressed` property was configured)
+		 *
+		 * @property {boolean} newValue The new `pressed`-state
+		 */
+		emit('update:pressed', !props.pressed)
+	}
+	// We have to both navigate and emit the click event
+	emit('click', event)
+	props.navigate(event)
+}
+
+/**
+ * Warn developers about missing aria label for icon-only buttons
+ */
+watch(
+	() => props.ariaLabel,
+	() => {
+		if (!props.ariaLabel && !hasText()) {
+			logger.debug('You need to fill either the text or the ariaLabel props in the button component.')
+		}
+	},
+	{ immediate: true },
+)
+</script>
+
+<style lang="scss" scoped>
+.button-vue {
+	// Setup different button sizes
+	--button-size: var(--default-clickable-area);
+	--button-radius: var(--border-radius-element, calc(var(--button-size) / 2));
+	--button-padding-default: min(calc(var(--default-grid-baseline) + var(--button-radius)), calc(var(--default-grid-baseline) * 4));
+	--button-padding: var(--default-grid-baseline) var(--button-padding-default);
+
+	&--size-small {
+		--button-size: var(--clickable-area-small, 24px);
+		--button-radius: var(--border-radius); // make the border radius even smaller for small buttons
+	}
+
+	&--size-large {
+		--button-size: var(--clickable-area-large, 48px);
+	}
+
+	// General styles
+	position: relative;
+	width: fit-content;
+	overflow: hidden;
+	border: 0;
+	padding-block: 0;
+	padding-inline: var(--button-padding);
+	font-size: var(--default-font-size);
+	font-weight: bold;
+	min-height: var(--button-size);
+	min-width: var(--button-size);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	// Cursor pointer on element and all children
+	cursor: pointer;
+	& *,
+	span {
+		cursor: pointer;
+	}
+	border-radius: var(--button-radius);
+	transition-property: color, border-color, background-color;
+	transition-duration: 0.1s;
+	transition-timing-function: linear;
+
+	// No outline feedback for focus. Handled with a toggled class in js (see data)
+	&:focus {
+		outline: none;
+	}
+
+	&:disabled {
+		cursor: default;
+		& * {
+			cursor: default;
+		}
+		opacity: $opacity_disabled;
+		// Gives a wash out effect
+		filter: saturate($opacity_normal);
+	}
+
+	// Default button type
+	color: var(--color-primary-element-light-text);
+	background-color: var(--color-primary-element-light);
+	&:hover:not(:disabled) {
+		background-color: var(--color-primary-element-light-hover);
+	}
+
+	// Back to the default color for this button when active
+	// TODO: add ripple effect
+	&:active {
+		background-color: var(--color-primary-element-light);
+	}
+
+	&__wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+
+	&--end &__wrapper {
+		justify-content: end;
+	}
+	&--start &__wrapper {
+		justify-content: start;
+	}
+	&--reverse &__wrapper {
+		flex-direction: row-reverse;
+	}
+
+	&--reverse#{&}--icon-and-text {
+		padding-inline: var(--button-padding) var(--default-grid-baseline);
+	}
+
+	&__icon {
+		height: var(--button-size);
+		width: var(--button-size);
+		min-height: var(--button-size);
+		min-width: var(--button-size);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	// For small buttons we need to adjust the icon size
+	&--size-small &__icon {
+		:deep(> *) {
+			max-height: 16px;
+			max-width: 16px;
+		}
+		:deep(svg) {
+			height: 16px;
+			width: 16px;
+		}
+	}
+
+	&__text {
+		font-weight: bold;
+		margin-bottom: 1px;
+		padding: 2px 0;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	// Icon-only button
+	&:not(:has(#{&}__text)) {
+		--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));
+		line-height: 1;
+		width: var(--button-size) !important;
+	}
+
+	// Text-only button
+	&:not(:has(#{&}__icon)) {
+		--button-padding: var(--button-padding-default);
+		& .button-vue__text {
+			padding-inline: var(--default-grid-baseline);
+		}
+	}
+
+	// Wide button spans the whole width of the container
+	&--wide {
+		width: 100%;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-main-text) !important;
+		box-shadow: 0 0 0 4px var(--color-main-background) !important;
+		&.button-vue--vue-tertiary-on-primary {
+			outline: 2px solid var(--color-primary-element-text);
+			border-radius: var(--border-radius-element, var(--border-radius));
+			background-color: transparent;
+		}
+	}
+
+	// Button types
+
+	// Primary
+	&--vue-primary {
+		background-color: var(--color-primary-element);
+		color: var(--color-primary-element-text);
+		&:hover:not(:disabled) {
+			background-color: var(--color-primary-element-hover);
+		}
+		// Back to the default color for this button when active
+		// TODO: add ripple effect
+		&:active {
+			background-color: var(--color-primary-element);
+		}
+	}
+
+	// Secondary
+	&--vue-secondary {
+		color: var(--color-primary-element-light-text);
+		background-color: var(--color-primary-element-light);
+		&:hover:not(:disabled) {
+			color: var(--color-primary-element-light-text);
+			background-color: var(--color-primary-element-light-hover);
+		}
+	}
+
+	// Tertiary
+	&--vue-tertiary {
+		color: var(--color-main-text);
+		background-color: transparent;
+		&:hover:not(:disabled) {
+			background-color: var(--color-background-hover);
+		}
+	}
+
+	// Tertiary, no background
+	&--vue-tertiary-no-background {
+		color: var(--color-main-text);
+		background-color: transparent;
+		&:hover:not(:disabled) {
+			background-color: transparent;
+		}
+	}
+
+	// Tertiary on primary color (like the header)
+	&--vue-tertiary-on-primary {
+		color: var(--color-primary-element-text);
+		background-color: transparent;
+
+		&:hover:not(:disabled) {
+			background-color: transparent;
+		}
+	}
+
+	// Success
+	&--vue-success {
+		background-color: var(--color-success);
+		color: white;
+		&:hover:not(:disabled) {
+			background-color: var(--color-success-hover);
+		}
+		// Back to the default color for this button when active
+		// : add ripple effect
+		&:active {
+			background-color: var(--color-success);
+		}
+	}
+
+	// Warning
+	&--vue-warning {
+		background-color: var(--color-warning);
+		color: white;
+		&:hover:not(:disabled) {
+			background-color: var(--color-warning-hover);
+		}
+		// Back to the default color for this button when active
+		// TODO: add ripple effect
+		&:active {
+			background-color: var(--color-warning);
+		}
+	}
+
+	// Error
+	&--vue-error {
+		background-color: var(--color-error);
+		color: white;
+		&:hover:not(:disabled) {
+			background-color: var(--color-error-hover);
+		}
+		// Back to the default color for this button when active
+		// TODO: add ripple effect
+		&:active {
+			background-color: var(--color-error);
+		}
+	}
+}
+
+</style>
diff --git a/src/components/NcButton/NcButtonWrapper.vue b/src/components/NcButton/NcButtonWrapper.vue
new file mode 100644
index 0000000000..4c1111d7b5
--- /dev/null
+++ b/src/components/NcButton/NcButtonWrapper.vue
@@ -0,0 +1,9 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<!-- This is just an empty wrapper component to preven duplicating code in the NcButton component -->
+<template>
+	<slot />
+</template>
diff --git a/src/components/NcButton/types.ts b/src/components/NcButton/types.ts
index 551a35c221..60ec5f9619 100644
--- a/src/components/NcButton/types.ts
+++ b/src/components/NcButton/types.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { PropType } from 'vue'
+
 export enum ButtonAlignment {
 	Start = 'start',
 	StartReverse = 'start-reverse',
@@ -31,3 +33,165 @@ export enum ButtonType {
 	Warning = 'warning',
 	Success = 'success',
 }
+
+export interface NcButtonEmits {
+	(e: 'click', event: MouseEvent): void
+	/**
+	 * Update the current pressed state of the button (if the `pressed` property was configured)
+	 */
+	(e: 'update:pressed', pressed: boolean): void
+}
+
+export const NcButtonProps = {
+	/**
+	 * Set the text and icon alignment
+	 *
+	 * @default 'center'
+	 * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}
+	 */
+	alignment: {
+		type: String as PropType<ButtonAlignment>,
+		default: ButtonAlignment.Center,
+		validator(value: string) {
+			return Object.values(ButtonAlignment).includes(value as ButtonAlignment)
+		},
+	},
+
+	/**
+	 * By default the icon is set to `aria-hidden="true"` to hide it from the accessibility tree.
+	 * But sometimes this is not desired, e.g. for a loading icon with an accessible name,
+	 * setting this prop will make the icon appear in the accessible tree.
+	 * @default false
+	 * @since 9.0.0
+	 */
+	noIconAriaHidden: {
+		type: Boolean,
+		default: false,
+	},
+
+	/**
+	 * Toggles the disabled state of the button on and off.
+	 */
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+
+	/**
+	 * Specify the button size
+	 * Accepted values: `'small'`, `'normal'` (default), `'large'`
+	 */
+	size: {
+		type: String,
+		default: 'normal',
+		validator(value: string) {
+			return ['small', 'normal', 'large'].includes(value)
+		},
+	},
+
+	/**
+	 * The main button text.
+	 * This can be overwritten by using the *default* slot.
+	 * @since 9.0.0
+	 */
+	text: {
+		type: String,
+		default: '',
+	},
+
+	/**
+	 * Specifies the button type
+	 * If left empty, the default button style will be applied.
+	 *
+	 * @default 'secondary'
+	 * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}
+	 */
+	type: {
+		type: String as PropType<ButtonType>,
+		default: ButtonType.Secondary,
+		validator(value: string) {
+			return Object.values(ButtonType).includes(value as ButtonType)
+		},
+	},
+
+	/**
+	 * Specifies the button native type
+	 * If left empty, the default "button" type will be used.
+	 *
+	 * @default 'button'
+	 * @type {'submit' | 'reset' | 'button'}
+	 */
+	nativeType: {
+		type: String as PropType<ButtonNativeType>,
+		default: ButtonNativeType.Button,
+		validator(value: string) {
+			return Object.values(ButtonNativeType).includes(value as ButtonNativeType)
+		},
+	},
+
+	/**
+	 * Specifies whether the button should span all the available width.
+	 * By default, buttons span the whole width of the container.
+	 */
+	wide: {
+		type: Boolean,
+		default: false,
+	},
+
+	/**
+	 * Always try to provide an aria-label to your button. Make it more
+	 * specific than the button's name by provide some more context. E.g. if
+	 * the name of the button is "send" in the Mail app, the aria label could
+	 * be "Send email".
+	 */
+	ariaLabel: {
+		type: String,
+		default: null,
+	},
+
+	/**
+	 * Providing the href attribute turns the button component into an `a`
+	 * element.
+	 */
+	href: {
+		type: String,
+		default: null,
+	},
+
+	/**
+	 * Target for the `a` element if `href` is set.
+	 * @default '_self'
+	 */
+	target: {
+		type: String,
+		default: '_self',
+	},
+
+	/**
+	 * Providing the download attribute with href downloads file when clicking.
+	 */
+	download: {
+		type: String,
+		default: null,
+	},
+
+	/**
+	 * The pressed state of the button if it has a checked state
+	 * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.
+	 *
+	 * Pressed state is not supported for links
+	 */
+	pressed: {
+		type: Boolean,
+		default: null,
+	},
+
+	/**
+	 * Providing the to attribute turns the button component into a `router-link`
+	 * element. Takes precedence over the href attribute.
+	 */
+	to: {
+		type: [String, Object],
+		default: null,
+	},
+}
diff --git a/styleguide.config.cjs b/styleguide.config.cjs
index 0ad025ba93..8b19b2fedd 100644
--- a/styleguide.config.cjs
+++ b/styleguide.config.cjs
@@ -160,6 +160,7 @@ module.exports = async () => {
 					'src/components/NcAppSettings*/*.vue',
 					'src/components/NcAppSidebar*/*.vue',
 					'src/components/NcBreadcrumb*/*.vue',
+					'src/components/NcButton/!(NcButton).vue',
 					'src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue',
 					'src/components/NcCollectionList/!(NcCollectionList).vue',
 					'src/components/NcContent/*.vue',