Button

Un componente de botón versátil con varias variantes y tamaños

Componente de botón construido con Ark UI que admite varias variantes y tamaños.

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button>Click me</Button>;
}

View Code

Cuándo usar Button

Usa variant="default" para acciones principales y variant="outline" para acciones secundarias. Mantener esta jerarquía mejora la legibilidad de la UI.

Instalación

bash

liminal add button

Uso

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button>Click me</Button>;
}

View Code

Ejemplos

Variantes

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

View Code

Tamaños

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="Icon button">
  <span className="i-lucide-settings" />
</Button>

View Code

API

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Estilo visual del botón.
size	"sm" \| "default" \| "lg" \| "icon"	"default"	Controla la altura y el padding del botón.
asChild	boolean	false	Se renderiza como otro elemento (Link, a, etc.) manteniendo los estilos.