Düğmeler

Düğmeler, kullanıcının işlemlerinin birincil görsel göstergesidir.

İlkeler

İşleme Yönelik: Düğmeler, bir işlemi tetiklediklerini net bir şekilde belirtmelidir.

Net Geri Bildirim: Düğmenin görünümü, anında geri bildirim sağlamak için farklı etkileşim durumlarında (üzerine gelme, basma, odaklanma) belirgin şekilde değişmelidir.

Tutarlı: Tüm düğmeler anında tanınabilmek için temel bir görsel dil paylaşmalıdır.

Esnek: Düğme bileşeni, tutarlılıktan ödün vermeden simgeler ve farklı boyutlar gibi yaygın varyasyonları desteklemelidir.

Kullanım ve Yerleşim

Düğmeler, alakalı içeriklerinin yakınına yerleştirilmelidir. Tek başına veya kartlar ve listeler gibi diğer bileşenlerle birlikte yerleştirilebilirler.

check_circle

Yapılması gerekenler

Daha az alakalı işlemleri göstermek için kademeli açıklama kullanın.

cancel

Yapılmaması gerekenler:

Kullanıcının görünümünü çok fazla düğmeyle doldurmak Bunun yerine düğme grubu kullanın.

check_circle

Yapılması gerekenler

Bir işlemi tetiklemek için düğmeleri kullanın. Alternatif olarak, statik bir öğe için başlık çipi kullanın.

cancel

Yapılmaması gerekenler:

Düğmeyi statik bir dekoratif öğe olarak kullanın.

Simge düğmeleri

İçerik yoğunluğunu azaltmak için simge düğmeler kullanılabilir. Simge bir işlemi net bir şekilde gösterdiğinde simge düğmelerini kullanın. Aksi takdirde düğme etiketi ekleyin.

check_circle

Yapılması gerekenler

Sık kullanılan ve kolayca tanınan işlemler için simge düğmesi kullanın.

cancel

Yapılmaması gerekenler:

Çok belirsiz işlemler için simge düğme kullanın.

Açılıp kapatılabilir

Favori gibi Boole durumlarına sahip işlemler için her düğme türünde açma/kapatma varyantı bulunur. Açma/kapatma durumları arasında simge değiştirme, etkileşimi bir bakışta anlaşılır ve duyarlı hale getirir.

check_circle

Yapılması gerekenler

Bir işlem için boole seçenekleri varsa açma/kapatma düğmesi kullanın. Örneğin, başlatma/durdurma.

cancel

Yapılmaması gerekenler:

İkili olmayan işlemler için açma/kapatma düğmesi kullanın.

Anatomi

Düğmeler, bir etiket ve isteğe bağlı olarak önde veya arkada yer alan simgeden oluşur.

Simge düğmeler yalnızca tanınabilir bir simgeden oluşur.

İkisinin de açılıp kapatılabilen bir varyantı vardır.

Özelleştirme

Düğmelerde varsayılan ve büyük stil bulunur. Büyük boyut, önemi vurgulamaya yardımcı olabilir.

Sondaki veya baştaki konumda bulunan düğmeye daha fazla vurgu, açıklama ve tanınma sağlamak için simgeler kullanılabilir.