← Back to Home

UI Kit

Component Showcase

Button

Default

Variants

Sizes

With Icon

Loading

Disabled

import { Button } from "@/ui/kit/Button";

// Basic usage
<Button>Click me</Button>

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

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Icon />
</Button>

// With icons
<Button>
  <Icon />
  Login
</Button>

// Loading state
<Button disabled>
  <Spinner className="animate-spin" />
  Please wait
</Button>

// Disabled
<Button disabled>Disabled</Button>

// As child (link that looks like a button)
<Button asChild>
  <Link href="/login">Login</Link>
</Button>