30 lines
724 B
Vue
30 lines
724 B
Vue
<template>
|
|
<button
|
|
:class="[
|
|
'inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm',
|
|
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
|
classes,
|
|
]"
|
|
:type="buttonType"
|
|
>
|
|
<slot />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
buttonType?: 'submit' | 'button';
|
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
}>(),
|
|
{ buttonType: 'button', variant: 'primary' }
|
|
);
|
|
|
|
const classes = computed(() => {
|
|
if (!props.variant || props.variant === 'primary')
|
|
return 'bg-green-600 hover:bg-green-700 text-white';
|
|
});
|
|
</script>
|