68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import {defineProps} from "vue";
|
|
|
|
const props = defineProps<{
|
|
label: string;
|
|
type: 'primary' | 'secondary' | 'tertiary';
|
|
disabled: boolean;
|
|
onClick: () => void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="['button', `button--${props.type}`]"
|
|
:disabled="props.disabled"
|
|
@click="props.onClick"
|
|
>
|
|
{{ props.label }}
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
|
|
&--primary {
|
|
background-color: var(--primary-500);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-600);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: transparent;
|
|
color: var(--neutral-50);
|
|
border: 1px solid var(--neutral-950);
|
|
|
|
&:hover {
|
|
background-color: var(--neutral-950);
|
|
}
|
|
}
|
|
|
|
&--tertiary {
|
|
background-color: transparent;
|
|
color: var(--neutral-700);
|
|
|
|
&:hover {
|
|
background-color: var(--neutral-100);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
</style> |