add basics for essential componentsui-kit-essentials

1 files changed, 39 insertions, 0 deletions

diff --git a/packages/studip-ui/src/components/SuiButton/SuiButton.vue b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
new file mode 100644
index 0000000..27d9c53
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
@@ -0,0 +1,39 @@
+<template>
+    <button 
+    class="sui-btn" 
+    :class="variantClass"
+    :disabled="disabled"
+  >
+  <SuiIcon 
+      v-if="icon && !iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+    
+    <span v-if="label" class="sui-button__label">
+      {{ label }}
+    </span>
+
+    <SuiIcon 
+      v-if="icon && iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+  </button>
+</template>
+<script setup>
+import { computed } from 'vue';
+import SuiIcon from './../SuiIcon/SuiIcon.vue';
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    icon: { type: String, default: null },
+    iconRight: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    variant: { type: String, default: 'primary' }
+});
+
+const variantClass = computed(() => `sui-btn--${props.variant}`);
+</script>
\ No newline at end of file