Button

Botón con múltiples variantes y tamaños. Es el componente de acción principal de la interfaz.

---

Import

import { Button } from '@imansi/ui';

---

Uso básico

<Button>Guardar cambios</Button>

---

Variantes

<Button variant="primary">Primario</Button>
<Button variant="secondary">Secundario</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Eliminar</Button>

Variante	Uso
primary	Acción principal (por defecto)
secondary	Acción secundaria con fondo sutil
outline	Acción con borde, sin fondo
ghost	Acción invisible hasta el hover
link	Parece un link de texto
destructive	Acción peligrosa (eliminar, cancelar)

---

Tamaños

<Button size="sm">Pequeño</Button>
<Button size="md">Mediano</Button>
<Button size="lg">Grande</Button>
<Button size="icon">🔔</Button>

Tamaño	Altura	Uso
sm	32px	Interfaces densas, tablas
md	40px	Por defecto
lg	48px	CTAs, formularios destacados
icon	40×40	Botón solo con ícono

---

Con íconos

import { Plus, ArrowRight, Trash2 } from 'lucide-react';

<Button>
  <Plus className="h-4 w-4" />
  Agregar usuario
</Button>

<Button variant="outline">
  Siguiente
  <ArrowRight className="h-4 w-4" />
</Button>

<Button variant="destructive" size="icon">
  <Trash2 className="h-4 w-4" />
</Button>

---

Estados

Deshabilitado

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

Cargando

import { Loader2 } from 'lucide-react';

<Button disabled>
  <Loader2 className="h-4 w-4 animate-spin" />
  Guardando...
</Button>

Ancho completo

<Button className="w-full">Iniciar sesión</Button>

---

Props

Prop	Tipo	Default	Descripción
variant	'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive'	'primary'	Estilo visual
size	'sm' | 'md' | 'lg' | 'icon'	'md'	Tamaño del botón
asChild	boolean	false	Delega el render al hijo (útil para <Link>)
disabled	boolean	false	Deshabilita el botón
className	string	—	Clases adicionales
...props	ButtonHTMLAttributes	—	Todas las props nativas de <button>

---

Con React Router

Usá asChild para renderizar un <Link> como botón:

import { Link } from 'react-router-dom';

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

---

Accesibilidad

• Navegable con Tab y activable con Enter / Space
• disabled previene la interacción pero mantiene el foco
• Focus visible con ring de --color-ring
• Compatible con aria-label cuando no hay texto visible

<Button size="icon" aria-label="Eliminar usuario">
  <Trash2 className="h-4 w-4" />
</Button>