From 513cd41bce3954feef6b83d3db16e9f52b8a6d56 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 16:58:46 +0000
Subject: [PATCH] frontend: Implement a component for buttons

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 frontend/src/components/BasicComponents.ts |  2 ++
 frontend/src/components/Button.vue         | 42 ++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 frontend/src/components/Button.vue

diff --git a/frontend/src/components/BasicComponents.ts b/frontend/src/components/BasicComponents.ts
index 60bc3cff..4a26d97c 100644
--- a/frontend/src/components/BasicComponents.ts
+++ b/frontend/src/components/BasicComponents.ts
@@ -5,6 +5,7 @@ import Container from "@/components/Container.vue";
 import Section from "@/components/Section.vue";
 
 // Elements
+import Button from "@/components/Button.vue";
 import Block from "@/components/Block.vue";
 import Box from "@/components/Box.vue";
 import Notification from "@/components/Notification.vue";
@@ -27,6 +28,7 @@ export default {
 		app.component("Container", Container)
 		app.component("Block", Block)
 		app.component("Box", Box)
+		app.component("Button", Button)
 		app.component("Icon", Icon)
 		app.component("Loader", Loader)
 		app.component("Modal", Modal)
diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
new file mode 100644
index 00000000..d9dd73f1
--- /dev/null
+++ b/frontend/src/components/Button.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+	const props = defineProps<{
+		loading: boolean,
+
+		// States
+		isPrimary?: boolean,
+		isSuccess?: boolean,
+		isWarning?: boolean,
+		isDanger? : boolean,
+
+		// Sizes
+		isLarge?  : boolean,
+		isMedium? : boolean,
+		isSmall?  : boolean,
+
+		// Full Width
+		isFullWidth?: boolean,
+	}>();
+</script>
+
+<template>
+	<button class="button" :class="{
+				// Is this loading?
+				'is-loading' : loading,
+
+				// States
+				'is-primary' : isPrimary,
+				'is-success' : isSuccess,
+				'is-warning' : isWarning,
+				'is-danger'  : isDanger,
+
+				// Sizes
+				'is-large'   : isLarge,
+				'is-medium'  : isMedium,
+				'is-small'   : isSmall,
+
+				// Full Width
+				'is-fullwidth' : isFullWidth,
+			}">
+		<slot />
+	</button>
+</template>
-- 
2.47.2