ButtonDemo,
ButtonVariants,
ButtonSizes,
ButtonIcons,
ButtonLoading,
ButtonDisabled,
ButtonFullWidth,
} from "@/examples/tr/button";
# Button
Bir aksiyonu tetikler: form göndermek, dialog açmak, bir değişikliği kaydetmek. Sonuç başka bir sayfaya gitmekse buton yerine link kullan.
```tsx
```
## Import
```tsx
import { Button } from "@meridui/react";
```
## Örnekler
### Varyantlar
`primary`, ekrandaki tek accent aksiyondur. `secondary` (varsayılan) geri kalan her şey içindir; `ghost` toolbar'larda ve yoğun satırlarda sessizce durur; `danger` geri alınamayan aksiyonları onaylar; `link` satır içi metin gibi görünür ama buton semantiğini korur.
```tsx
```
### Boyutlar
`sm` 36px, `md` 44px (varsayılan), `lg` 50px yüksekliğindedir. Yan yana duran kontroller aynı taban çizgisini paylaşsın diye boyutu komşu input'larla eşleştir.
```tsx
```
### İkonlu
`leadingIcon` ve `trailingIcon` herhangi bir node alır. İkisi de `aria-hidden` span'lere sarılır; butonun adını yalnızca etiket belirler.
```tsx
}>Yeni proje
}>Devam et
}>Sil
```
### Yükleniyor
`loading` butonun üstüne bir spinner koyar, layout zıplamasın diye genişliği korur, `aria-busy` ve `aria-disabled` atar ve tıklamaları yutar. Buton focus alabilir kalır, yani istek sürerken klavye focus'u kaybolmaz.
```tsx
const [saving, setSaving] = useState(false);
```
### Devre dışı
`disabled` native attribute'tur: buton tab sırasından çıkar ve tıklamaları yok sayar. Bir aksiyonu sessizce devre dışı bırakmak yerine neden kullanılamadığını açıklamayı tercih et.
```tsx
```
### Tam genişlik
`fullWidth` butonu container'ı boyunca uzatır. Dar formlarda ve mobilde işe yarar.
```tsx
```
### Router link'i olarak
Router'ının link'ini buton görünümüyle render'lamak için `asChild` kullan. Böylece navigasyon gerçek bir link olarak kalır:
```tsx
import Link from "next/link";
```
## API referansı
`Button` ref'ini `