From 0822e49df0a8c476c99a304332e5ec21df7f3f9b Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Fri, 29 Apr 2022 09:46:01 +0200
Subject: [PATCH] button with slot for icon
---
src/components/BaseComponents/IconButton.vue | 30 ++++++++++++++++++++
1 file changed, 30 insertions(+)
create mode 100644 src/components/BaseComponents/IconButton.vue
diff --git a/src/components/BaseComponents/IconButton.vue b/src/components/BaseComponents/IconButton.vue
new file mode 100644
index 0000000..4bacbdf
--- /dev/null
+++ b/src/components/BaseComponents/IconButton.vue
@@ -0,0 +1,30 @@
+<template>
+ <!-- Icon button -->
+ <button
+ class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ >
+ <div class="flex flex-row px-5 py-2.5 h-10">
+ <!-- Icon slot: Default content "Ban"-icon -->
+ <div class="h-6 w-6">
+ <slot>
+ <BanIcon />
+ </slot>
+ </div>
+ <p>{{ text }}</p>
+ </div>
+ </button>
+</template>
+
+<script>
+import { BanIcon } from "@heroicons/vue/outline";
+
+export default {
+ name: "IconButton",
+ props: {
+ text: String,
+ },
+ components: {
+ BanIcon,
+ },
+};
+</script>
--
GitLab