<template>
  <button
    class="ui-button"
    :class="[`ui-button-${variant}`, { 'is-loading': loading }]"
    :disabled="disabled || loading"
    type="button"
  >
    <span v-if="loading" class="spinner" aria-hidden="true"></span>
    <slot />
  </button>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: "primary",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
</script>