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.

KararlıKaynak kod

<Button variant="primary">Değişiklikleri kaydet</Button>
<Button>Vazgeç</Button>

Import

tsx

import { Button } from "@merid/react";

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.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>

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.

<Button size="sm">Küçük</Button>
<Button size="md">Orta</Button>
<Button size="lg">Büyük</Button>

İ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.

<Button variant="primary" leadingIcon={<PlusIcon />}>Yeni proje</Button>
<Button trailingIcon={<ArrowRightIcon />}>Devam et</Button>
<Button variant="danger" leadingIcon={<TrashIcon />}>Sil</Button>

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.

const [saving, setSaving] = useState(false);

<Button
variant="primary"
loading={saving}
onClick={() => {
  setSaving(true);
  window.setTimeout(() => setSaving(false), 1500);
}}
>
Değişiklikleri kaydet
</Button>

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.

<Button variant="primary" disabled>Yayınla</Button>
<Button disabled>Dışa aktar</Button>

Tam genişlik

fullWidth butonu container'ı boyunca uzatır. Dar formlarda ve mobilde işe yarar.

<Button variant="primary" fullWidth>Hesap oluştur</Button>

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";

<Button asChild variant="primary">
  <Link href="/signup">Ücretsiz başla</Link>
</Button>

API referansı

Button ref'ini <button>'a iletir, diğer tüm native buton attribute'larını olduğu gibi geçirir. type varsayılan olarak "button"'dır; form içindeki bir buton, type="submit" vermediğin sürece formu göndermez.

Prop	Tip	Varsayılan	Açıklama
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger" \| "link"`	`"secondary"`	Görsel stil. primary, ekrandaki tek accent aksiyondur.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Yükseklik ve padding: sm 36px, md 44px, lg 50px.
`loading`	`boolean`	`false`	Spinner gösterir, genişliği korur, aria-busy atar ve tıklamaları engeller.
`leadingIcon`	`ReactNode`	–	Etiketten önceki ikon. Yardımcı teknolojilerden gizlenir.
`trailingIcon`	`ReactNode`	–	Etiketten sonraki ikon. Yardımcı teknolojilerden gizlenir.
`fullWidth`	`boolean`	`false`	Butonu container'ının genişliğine uzatır.
`asChild`	`boolean`	`false`	`<button>` yerine tek child elemanı (örneğin bir router `<Link>`'i) bu butonun stiliyle render'lar. Props, ref, handler'lar ve className child'a birleştirilir; child'ın içeriği butonun içerik span'ine sarılır. `disabled`/`loading`, `aria-disabled`'a dönüşür ve tıklamaları engeller. Server component'lerde de çalışır.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native buton tipi.
`disabled`	`boolean`	–	Native disabled attribute'u.

Stil verme

Seçici	Değerler
`.mrd-button`	Kök `<button>`
`.mrd-button__content`	İkonları ve etiketi saran eleman (yüklenirken gizlenir)
`.mrd-button__icon`	Baştaki / sondaki ikon slot'u
`.mrd-button__spinner`	Yüklenirken görünen spinner
`data-variant`	`primary` · `secondary` · `ghost` · `danger` · `link`
`data-size`	`sm` · `md` · `lg`
`data-loading`	Yüklenirken bulunur
`data-full-width`	`fullWidth` verildiğinde bulunur

Boyuta göre atanan component değişkenleri: --mrd-button-height, --mrd-button-padding, --mrd-button-font.

css

.toolbar .mrd-button {
  --mrd-button-height: 32px;
  --mrd-button-padding: 0 12px;
}

Erişilebilirlik

Native bir <button> render'lar; Enter ve Space ile tetiklenir, formlara katılır.
Görünen etiket, butonun erişilebilir adıdır. Yalnızca ikondan oluşan aksiyonlar için label'ı zorunlu olan IconButton'ı kullan.
loading sırasında buton aria-busy="true" ve aria-disabled="true" bildirir ama focus'u korur.

Tuş	Ne yapar
`Tab`	Focus'u butona taşır.
`Enter`	Butonu tetikler.
`Space`	Butonu tetikler.

Kullanım ilkeleri

Yap

Her görünümde tek bir primary buton kullan ve ne olacağını söyleyen bir fiille etiketle: “Değişiklikleri kaydet”, “Davet gönder”.

Kaçın

İki primary butonu yan yana koymak ya da “Tamam”, “Gönder” gibi belirsiz etiketler kullanmak.

Yap

İstek sürerken loading kullan; buton yerini ve focus'u korur.