Button

Semantik varyantlar, boyutlar ve yükleme durumları sunan aksiyon butonu.

Button.tsx

Görsel Varyantlar

Boyutlar & Şekiller

İkonlar, Kısayollar & Durumlar

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/button.json

Kullanım Örneği

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

<Button variant="primary" loading={isSaving} loadingText="Kaydediliyor">
  Projeyi kaydet
</Button>

<Button href="/docs" variant="outline">Dokümanları aç</Button>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
variant	"primary" \| "secondary" \| "sage" \| "subtle" \| "outline" \| "ghost" \| "danger" \| "success" \| "link"	"primary"	Butonun görsel önem seviyesini belirler.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Yükseklik ve iç boşluğu belirler.
loading	boolean	false	Butonu pasifleştirir ve yükleme göstergesi sunar.
loadingText	string	—	Yükleme sırasında görünen alternatif metin.
leftIcon	ReactNode	—	Etiketin solundaki dekoratif ikon.
rightIcon	ReactNode	—	Etiketin sağındaki dekoratif ikon.
shortcut	string	—	Görsel klavye kısayolu ipucu.
fullWidth	boolean	false	Butonu kapsayıcı genişliğine yayar.
href	string	—	Verildiğinde butonu bağlantı olarak render eder.
external	boolean	false	Bağlantıyı güvenli biçimde yeni sekmede açar.