Variantes

variant="light"

variant="lightPurple"

variant="gradientPurple"

variant="outline"

variant="outlineIcon"

Tamaños

size="small"

size="medium"

size="large"

Estados

Estado normal

disabled="true"

isLoading="true"

isFullWidth="true"

Con Iconos

leftIcon="true"

rightIcon="true"

Como Enlaces

Link Light

href="/"

External Link

target="_blank"

Anchor Link

href="#section"

Combinaciones Complejas

Newsletter Signup

Action Buttons

Ejemplos de Código

---
// Importar iconos de Lucide
import { Plus, Mail, Download, ArrowRight } from '@lucide/astro'
---

<!-- Variante light (default) -->
<Button>Botón básico</Button>

<!-- Con variante y tamaño -->
<Button variant="lightPurple" size="large">Botón purple claro</Button>

<!-- Con estado de carga -->
<Button variant="light" isLoading>Enviando...</Button>

<!-- Con icono de Lucide -->
<Button variant="gradientPurple" leftIcon>
  <Plus slot="left-icon" size={16} />
  Añadir elemento
</Button>

<!-- Icono derecho -->
<Button variant="outline" rightIcon>
  Continuar
  <ArrowRight slot="right-icon" size={16} />
</Button>

<!-- Como enlace -->
<Button href="/contact" variant="outline">Ir a contacto</Button>

<!-- Ancho completo con icono -->
<Button variant="light" isFullWidth leftIcon>
  <Download slot="left-icon" size={18} />
  Descargar archivo
</Button>

<!-- Newsletter con gradient purple -->
<Button variant="gradientPurple" size="large" isFullWidth leftIcon>
  <Mail slot="left-icon" size={20} />
  Suscríbete al Newsletter
</Button>

<!-- OutlineIcon optimizado para iconos -->
<Button variant="outlineIcon" leftIcon>
  <Plus slot="left-icon" size={16} />
  Con borde purple
</Button>

Usando Iconos de Lucide

Lucide-astro ofrece más de 1000 iconos SVG optimizados y compatibles con Astro. Los iconos se tree-shake automáticamente, solo incluye los que uses.

npm install @lucide/astro

Light + Plus

LightPurple + Mail

GradientPurple + Download

Outline + Arrow

OutlineIcon + Chevron

Props Disponibles

Prop	Tipo	Default	Descripción
variant	'light' \| 'lightPurple' \| 'gradientPurple' \| 'outline' \| 'outlineIcon'	'light'	Estilo visual del botón
size	'small' \| 'medium' \| 'large'	'medium'	Tamaño del botón
isFullWidth	boolean	false	Ocupa todo el ancho disponible
isLoading	boolean	false	Muestra spinner de carga
disabled	boolean	false	Deshabilita el botón
leftIcon	boolean	false	Habilita slot para icono izquierdo
rightIcon	boolean	false	Habilita slot para icono derecho
href	string	undefined	Convierte en enlace si se proporciona

Button Component Documentation