Button

Botón accesible con 6 variantes y 4 tamaños. Usa CVA internamente. Soporte para asChild con Radix Slot.

pnpm dlx nuvo-ui add button

Variantes

<Button variant="default">Default</Button>
<Button variant="destructive">Eliminar</Button>
<Button variant="outline">Cancelar</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Ver más</Button>

Tamaños

<Button size="sm">Pequeño</Button>
<Button size="md">Mediano</Button>   {/* default */}
<Button size="lg">Grande</Button>
<Button size="icon" aria-label="Cerrar">✕</Button>

Estados

<Button disabled>Procesando...</Button>

asChild — renderizar como enlace

Ir al inicio

import Link from "next/link"

<Button asChild>
  <Link href="/dashboard">Ir al dashboard</Link>
</Button>

Props

Prop	Tipo	Default	Descripción
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Estilo visual del botón
size	"sm" \| "md" \| "lg" \| "icon"	"md"	Tamaño del botón
asChild	boolean	false	Delega el render al hijo con Radix Slot
disabled	boolean	false	Deshabilita el botón
...	ButtonHTMLAttributes	—	Todos los atributos nativos de <button>