Temel Butonlar

Primary Button Secondary Button Success Button Danger Button Warning Button

<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Primary Button</button>

Outline & Ghost Butonlar

Outline Button Ghost Button Link Button

<button class="... border border-input bg-background hover:bg-accent hover:text-accent-foreground ...">Outline</button>
<button class="... hover:bg-accent hover:text-accent-foreground ...">Ghost</button>
<button class="... underline-offset-4 hover:underline text-primary ...">Link</button>

Buton Boyutları

Small Default Large 🔍

<button class="... h-9 px-3">Small</button>
<button class="... h-10 px-4 py-2">Default</button>
<button class="... h-11 px-8">Large</button>
<button class="... h-10 w-10">Icon</button>

İkonlu Butonlar

➕ Ekle ✓ Kaydet 🗑️ Sil ⬇️ İndir

<button class="... gap-2">
  <span>➕</span>
  <span>Ekle</span>
</button>

Buton Durumları

Disabled Primary Disabled Outline ⟳ Loading...

<button class="... disabled:opacity-50" disabled>Disabled</button>

Tam Genişlik Butonlar

Full Width Primary Full Width Outline

<button class="... w-full">Full Width</button>