EUButton

Los botones EUButton están listos para usarse!!!! Ofrecen diferentes variantes y tamaños.

Demostración en Vivo

Uso Básico

Puedes utilizar el componente EUButton de la siguiente manera:

<template>
  <EUButton>
    Botón Primario
  </EUButton>
</template>

<script setup>
import EUButton from 'enviame-ui';
</script>

Variantes Disponibles

Nuestro componente de botón soporta las siguientes variantes:

• Primary (por defecto)
• Secondary
• Tertiary
• Destructive
• Success

Ejemplos de Variantes

<template>
  <EUButton variant="secondary">
    Botón Secundario
  </EUButton>
</template>

Tamaños Disponibles

El botón viene en dos tamaños:

• lg (grande, por defecto)
• sm (pequeño)

Ejemplos de Tamaños

Large ButtonSmall Button

<template>
  <EUButton size="sm">
    Botón Pequeño
  </EUButton>
</template>

Ejemplos Combinados

Puedes combinar variantes y tamaños para obtener el botón que necesitas:

Primary SmallSecondary LargeDestructive SmallSuccess Large

<template>
  <EUButton variant="success" size="lg">
    Botón Éxito Grande
  </EUButton>
</template>

Personalización con Tailwind CSS

Puedes aplicar clases de Tailwind CSS para personalizar aún más tus botones:

<template>
  <EUButton class="bg-gradient-to-r from-blue-500 to-green-500 text-white">
    Botón Personalizado
  </EUButton>
</template>

Resultado:

Propiedades del Componente

Propiedad	Tipo	Valores Permitidos	Descripción
variant	string	'primary', 'secondary', 'tertiary', 'destructive', 'success'	Especifica el estilo visual del botón.
size	string	'sm', 'lg'	Define el tamaño del botón.

Importación del Componente

Asegúrate de importar el componente correctamente en tu archivo Vue:

<script setup>
import EUButton from 'enviame-ui';
</script>

Notas Adicionales

• Accesibilidad: Todos los botones están diseñados para ser accesibles y cumplir con las pautas de accesibilidad.
• Estilos Personalizados: Puedes añadir clases personalizadas o utilizar Tailwind CSS para adaptar los botones a tu diseño.

---

¡Espero que esta documentación mejorada te sea de gran ayuda! He organizado la información para que sea más clara y he incluido ejemplos en vivo para que puedas ver los botones en acción. Además, la sección de personalización con Tailwind CSS te permitirá adaptar los botones a tus necesidades específicas.

Si tienes alguna pregunta o necesitas más asistencia, no dudes en contactarme. ¡Estoy aquí para ayudarte!