Eylem · Button

Düğme

Kullanıcının bir işlemi başlatmasını sağlar. Her ekranda tek bir birincil düğme bulunur.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Birincil Canlı örnek

HTML kodunu göster

<button class="kiris-button" type="button">Başvuruyu gönder</button>

İkincil Canlı örnek

HTML kodunu göster

<button class="kiris-button kiris-button--ikincil" type="button">Taslağı kaydet</button>

Tehlike Canlı örnek

HTML kodunu göster

<button class="kiris-button kiris-button--tehlike" type="button">Başvuruyu sil</button>

Düğme grubu Canlı örnek

HTML kodunu göster

<div class="kiris-button-grubu">
  <button class="kiris-button" type="button">Devam et</button>
  <button class="kiris-button kiris-button--ikincil" type="button">İptal</button>
</div>

Yalnız simge Canlı örnek

HTML kodunu göster

<div class="kiris-button-grubu">
  <button class="kiris-button kiris-button--ikincil kiris-button--simge" type="button" aria-label="Yazdır"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-print"/></svg></button>
  <button class="kiris-button kiris-button--ikincil kiris-button--simge" type="button" aria-label="Düzenle"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-edit"/></svg></button>
  <button class="kiris-button kiris-button--tehlike kiris-button--simge" type="button" aria-label="Sil"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button>
</div>

Ne zaman kullanılır

Bir formu gönderirken birincil düğmeyi kullanın.
Geri dönüş gibi ikincil işlemler için ikincil düğmeyi kullanın.
Silme gibi geri alınamaz işlemler için tehlike düğmesini kullanın.
Başka bir sayfaya götüren bir eylem için düğme değil bağlantı kullanın.

Erişilebilirlik

Dokunma alanı en az 44 x 44 piksel olur.
Odak halkası 3 piksel kalınlığında ve sarı renktedir. Odak halkasını kaldırmayın.
Etiket metni eylemi anlatır. "Tıkla" veya "Gönder" yerine "Başvuruyu gönder" yazın.
Devre dışı düğme yerine düğmeyi görünür tutun ve hata mesajı gösterin.

Karşılanan WCAG 2.2 ölçütleri 1.4.11 2.4.7 2.5.5 2.5.8

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-button ile başlayan sınıflar