From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 16:58:46 +0000 (+0000)
Subject: frontend: Implement a component for buttons
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=513cd41bce3954feef6b83d3db16e9f52b8a6d56;p=pbs.git

frontend: Implement a component for buttons

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

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>