Componente BaseButton

El componente BaseButton es un botón reutilizable con varias variantes y opciones de estilo. Se utiliza para manejar acciones en la aplicación con soporte para estados como disabled, processing y variantes de estilo (primary, secondary, destroy).

Uso

El componente acepta propiedades para definir su comportamiento y apariencia. Puedes usarlo con distintos type, variant y estilos opcionales como rounded para bordes redondeados.

Ejemplo básico

<template>
  <BaseButton variant="primary" @click="submitForm">
    Enviar
  </BaseButton>
</template>

<script setup>
function submitForm() {
  // Lógica del formulario aquí
}
</script>

Propiedades

Propiedad	Tipo	Requerido	Descripción
type	String	false	Define el tipo del botón (submit, button, reset). Por defecto: submit.
variant	String	true	Estilo visual del botón. Opciones: primary, secondary, destroy.
rounded	Boolean	false	Si se establece en true, el botón tendrá bordes redondeados completos (rounded-full).
processing	Boolean	false	Muestra un indicador de carga cuando está en true.
disabled	Boolean	false	Deshabilita el botón cuando está en true.

Eventos

El componente emite un evento click cuando se presiona el botón y no está en estado disabled ni processing.

Evento	Descripción
click	Se emite cuando el usuario hace clic en el botón.

Variantes de Botón

Las variantes definen el estilo visual del botón:

1. Primary (`variant="primary"): Botón principal con fondo sólido.
2. Secondary (`variant="secondary"): Botón con borde y estilo transparente.
3. Destroy (`variant="destroy"): Botón de advertencia para acciones destructivas.

Ejemplo de Variantes

<template>
  <div>
    <BaseButton variant="primary">
      Guardar
    </BaseButton>

    <BaseButton variant="secondary">
      Cancelar
    </BaseButton>

    <BaseButton variant="destroy">
      Eliminar
    </BaseButton>
  </div>
</template>

Estructura Interna

El componente BaseButton se construye con la siguiente estructura:

<button
    :type="type"
    class="flex"
    :class="[buttonClass, disabled && 'opacity-50 cursor-not-allowed']"
    @click="handleClick"
    :disabled="disabled"
>
  <svg v-if="processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  <slot></slot>
</button>

Iconos y Animaciones

Si la propiedad processing está activa (true), se muestra un icono de carga con la animación de spin:

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

Slots

El componente usa un slot para inyectar el contenido del botón:

<BaseButton variant="primary">
  Cargar datos
</BaseButton>

---

Con esta documentación tendrás toda la información relevante para este componente y sus variantes. ¡Espero que te sea útil!