52 lines
1 KiB
Vue
52 lines
1 KiB
Vue
<template>
|
|
<button :class="`button button--${props.size} button--${props.color}`">
|
|
<Icon :name="props.iconBefore" size="2rem" v-if="props.iconBefore" />
|
|
<span class="button__label">{{ props.label }}</span>
|
|
<Icon :name="props.iconAfter" size="2rem" v-if="props.iconAfter" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
iconBefore: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
iconAfter: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "md",
|
|
validator: (value) => ["sm", "md", "lg"].includes(value),
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "primary",
|
|
validator: (value) => ["primary", "neutral", "secondary"].includes(value),
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
button {
|
|
border: none;
|
|
|
|
&.button--lg {
|
|
padding: 16px 24px;
|
|
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
&.button--primary {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
}
|
|
</style>
|