yunohost-portal/components/YButton.vue
2023-07-26 04:11:47 +02:00

40 lines
863 B
Vue

<script setup lang="ts">
const props = withDefaults(
defineProps<{
type?: HTMLButtonElement['type']
text?: string
variant?: string
icon?: string
iconSize?: string
iconOnly?: boolean
block?: boolean
}>(),
{
type: 'button',
text: undefined,
variant: 'primary',
icon: undefined,
iconSize: '1.5em',
iconOnly: false,
block: false,
},
)
const variantClass = computed(() => {
return {
primary: 'btn-primary',
success: 'btn-success',
info: 'btn-info',
error: 'btn-error',
}[props.variant]
})
</script>
<template>
<button class="btn" :class="[variantClass, { 'btn-block': block }]">
<slot name="default">
<Icon v-if="icon" :name="icon" :size="iconSize" aria-hidden="true" />
<span :class="{ 'sr-only': iconOnly }">{{ text }}</span>
</slot>
</button>
</template>