yunohost-portal/components/YButton.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>