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="trds-button" type="button">Başvuruyu gönder</button>

İkincil Canlı örnek

HTML kodunu göster

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

Tehlike Canlı örnek

HTML kodunu göster

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

Düğme grubu Canlı örnek

HTML kodunu göster

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

Yalnız simge Canlı örnek

HTML kodunu göster

<div class="trds-button-grubu">
  <button class="trds-button trds-button--ikincil trds-button--simge" type="button" aria-label="Yazdır"><svg class="trds-simge" aria-hidden="true"><use href="#edk-tool-print"/></svg></button>
  <button class="trds-button trds-button--ikincil trds-button--simge" type="button" aria-label="Düzenle"><svg class="trds-simge" aria-hidden="true"><use href="#edk-tool-edit"/></svg></button>
  <button class="trds-button trds-button--tehlike trds-button--simge" type="button" aria-label="Sil"><svg class="trds-simge" aria-hidden="true"><use href="#edk-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.