Skip to content
Snippets Groups Projects

Community request

Merged Haakon Tideman Kanter requested to merge community-request into main
Files
40
<template>
<!-- Icon button -->
<button
class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80"
:class="color"
>
<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 class="w-5 h-5 mx-1">
<slot><BanIcon /></slot>
</div>
<span class="mx-1">{{ text }}</span>
</button>
</template>
@@ -22,9 +17,21 @@ export default {
name: "IconButton",
props: {
text: String,
buttonColor: String,
},
components: {
BanIcon,
},
computed: {
color() {
if (this.buttonColor === "red") {
return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
}
if (this.buttonColor === "green") {
return "bg-success-medium hover:bg-success-dark focus:ring-success-light";
}
return "bg-primary-medium hover:bg-primary-dark focus:ring-primary-light";
},
},
};
</script>
Loading