Button

Ne zaman kullanılır

Button, kullanıcının bulunduğu sayfada bir şeyi değiştiren işlemler içindir: kaydetmek, göndermek, onaylamak, dosya indirmek.

Ne zaman kullanılmaz

• Başka bir sayfaya gitmek için: Bağlantı kullanın. Görsel olarak Button gerekiyorsa render ile <a> çizin (Kod sekmesi).
• Bir ayarı açıp kapatmak için: Switch kullanın.
• Birden çok seçenek sunmak için: DropdownMenu kullanın. Yan yana dörtten fazla Button dizmeyin.

Anatomi

Buton123

1. Kapsayıcıarka plan, kenarlık ve köşe yarıçapı; yüksekliği seçilen boyuttan gelir.
2. Etiketişlemi fiil ve nesneyle anlatan kısa metin.
3. Odak halkasıyalnızca klavyeyle odaklanınca, Button'dan 2 px dışarıda çizilir.

Davranış

• Fareyle tıklama, Enter ve Boşluk tuşu işlemi başlatır.
• Üzerine gelindiğinde ve basılı tutulduğunda arka plan bir ton koyulaşır; renk geçişi 110 ms sürer.
• Odak halkası yalnızca klavyeyle gelindiğinde çizilir; fareyle tıklamada görünmez.
• Devre dışı Button hiçbir olaya yanıt vermez ve imleç bunu gösterir.
• Yükleniyor durumundaki Button tıklamaya ve tuşlara yanıt vermez ama odakta kalır; işlem bitince yeniden etkinleşir. disabled de verilmişse yükleniyor kazanır: Button odaklanabilir kalır ve aria-disabled taşır. Yükleme bitince devre dışı görünümü ve kuralları geçerli olur.
• Klavye ve ekran okuyucu ayrıntıları Erişilebilirlik sekmesinde.

Yönergeler

Aşağıdaki yedi kural, Button’ın ürün genelinde aynı anlamı taşımasını sağlar.

Bir alanda tek birincil işlem

Birincil Button, kullanıcıya “buradan devam et” der. İki birincil Button yan yana olunca hangisinin ana yol olduğu anlaşılmaz.

VazgeçGönder

YapınAna işlem birincil, diğeri üçüncül varyantta.

VazgeçGönder

Yapmayınİki birincil Button kullanıcıyı seçim yapmaya zorlar.

Etiket ne olacağını söylesin

Etiket, tıklayınca ne olacağını tek başına anlatmalı. “Tamam” ya da “Evet” gibi etiketler, kullanıcıyı çevredeki metni okumaya zorlar.

Raporu indir

YapınFiil ve nesne birlikte: ne indirileceği açık.

Tamam

YapmayınGenel etiket işlemin sonucunu söylemez.

Geri alınamayan işlemler tehlike tonunda

Silme, iptal ve geri döndürülemeyen diğer işlemler tehlike tonuyla gösterilir ve bir onay adımı ister.

VazgeçSil

YapınTehlike tonu sonucu önceden belli eder; onay adımı ardından gelir.

VazgeçSil

YapmayınNötr birincil Button, silmeyi sıradan bir işlem gibi gösterir.

Devre dışı bırakıyorsanız nedenini yazın

Neden etkin olmadığı söylenmeyen bir Button, kullanıcıyı ne yapacağını tahmin etmeye bırakır.

GönderÖnce zorunlu alanları doldurun.

YapınGereken koşul hemen altında yazılı; Button odaklanabilir kalıyor.

Gönder

YapmayınAçıklamasız devre dışı Button, eksik adımı gizler.

Yükleniyor durumu uzun işlemler için

Gösterge, yaklaşık bir saniyeden uzun süren işlemlerde isteğin alındığını söyler ve ikinci tıklamayı engeller. Anında biten bir işlemde yalnızca göz kırpar.

GönderYükleniyor

YapınGönderim sürerken gösterge döner; Button aynı genişlikte kalır.

Filtreyi temizleYükleniyor

YapmayınFiltreyi temizlemek anında biter; gösterge yalnızca titreşim yaratır.

Doğrulama hatasında göstergeyi döndürmeyin

Form geçersizken Button’ı kilitleyip göstergeyi döndürmek bir şeyin sürdüğünü söyler, oysa kullanıcıdan beklenen hatayı düzeltmesidir. Button etkin kalsın, hata ilgili alanın altında yazsın.

Alan etiketi

Hata mesajı burada yer alır

Gönder

YapınHata alanın altında; Button etkin, kullanıcı düzeltip yeniden gönderir.

Alan etiketi

Hata mesajı burada yer alır

GönderYükleniyor

YapmayınDönen gösterge, düzeltilmesi gereken hatanın üstünü örter.

İkon etiketin yerini tutmaz

Bu sürümde her Button görünür bir etiket taşır. İkon etiketin anlamını destekler; tek başına herkes tarafından aynı biçimde anlaşılmaz.

Raporu indir

Yapınİkon etiketi destekliyor; işlem metinden anlaşılıyor.

YapmayınYalnızca ikonlu Button bu sürümde desteklenmez; ne yaptığı tahmine kalır.

İçerik

• Cümle düzeninde yazın: yalnızca ilk kelimenin ilk harfi büyük (“Raporu indir”, “Raporu İndir” değil).
• Bir ile üç kelime arasında kalın. Nesne ve fiil birlikte: “Raporu indir”, “Taslağı kaydet”.
• Noktalama, “lütfen” ve ünlem kullanmayın.
• Aynı işlem için ürünün her yerinde aynı kelimeyi kullanın: bir ekranda “sil” diyorsanız diğerinde “kaldır” demeyin.
• Türkçe etiketler çoğu zaman İngilizce karşılıklarından uzundur; yerleşimi Türkçe metinle sınayın.

Türkçe	İngilizce
Kaydet	Save
Gönder	Submit
Taslağı kaydet	Save draft
Raporu indir	Download report
Dosyayı sil	Delete file

Platformlar

• Masaüstü: İşlem grupları sağa hizalanır; birincil Button grubun en sağındadır.
• Mobil: Ana işlem ekranın altında, tam genişlikte ve büyük boydadır. Vazgeç işlemi onun altında üçüncül varyantta durur.

Cam

variant="glass" ve variant="glass-prominent" fotoğraf, video ya da hareketli bir arka plan üstündeki kontroller içindir. Cam bir Provider olmadan da camdır. glass-prominent birincil renkle tonlanır ve parlama taşımaz, böylece etiketi kontrastını korur. Camın opak çizildiği yerde (daha fazla kontrast, zorlanmış renkler, azaltılmış saydamlık, arka plan bulanıklığı desteği yok) secondary ve primary gibi görünür. Danger tonu yoktur. Bir grupta en fazla bir glass-prominent kullanın.

İlgili bileşenler

• TextInput: Button çoğu zaman bir formun gönderme işlemidir.
• Badge: Bir kaydın durumunu (Onaylandı) göstermek için Button değil Badge kullanılır.