Toggle

Ne zaman kullanılır

Toggle, hemen etki eden ve basılı kalan bir ayar içindir: metin biçimi, görünüm seçeneği, bir filtrenin açılıp kapanması.

Ne zaman kullanılmaz

• Formda bir seçim için: Gönderilen değerler onay kutusu ya da anahtar ile toplanır; Toggle form değeri göndermez.
• Bir işlemi bir kez çalıştırmak için: Button ya da IconButton kullanın.
• Birbirini dışlayan seçenekler için: Seçenekleri ToggleGroup içine koyun.

Anatomi

KalınÖğe

AçıkKoyu

Kodu kopyala

import { Toggle } from '@bigbang/ui';

export default function WithText() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="bold">Kalın</Toggle>
      <Toggle variant="secondary" defaultPressed>
        Öğe
      </Toggle>
    </div>
  );
}

1. Kutu: Button yükseklikleri; basılıyken color-surface-selected dolgu ve color-border-selected kenarlık.
2. İkon: İsteğe bağlı kayıtlı ikon (icon), aria-hidden.
3. Metin: İsteğe bağlı görünür ad (children). Yoksa label zorunludur.

Davranış

• Tıklama, Enter ve Space basılı durumu değiştirir.
• Kontrolsüz kullanımda defaultPressed, kontrollü kullanımda pressed ve onPressedChange kullanılır.
• Basılı durum dolgu ve kenarlıkla birlikte gösterilir; yalnızca renge dayanmaz.
• ToggleGroup içinde value verilir; grup basılı değerleri tutar ve görünüm ile boyutu aktarır.

Yönergeler

• Etiket durumu değil ayarı adlandırsın: “Kalın”. “Kalın yap” ya da “Kalını kapat” yazmayın.
• Basılı durumun etkisi hemen görünsün; onay gerektiren ayarlar için Toggle kullanmayın.
• Araç çubuklarında tertiary, kart ve filtre satırlarında secondary kullanın.

İçerik

• Etiket kısa bir ad ya da sıfattır; duruma göre değişmez.

Türkçe	İngilizce
Kalın	Bold
İtalik	Italic
Altı çizili	Underline

İlgili bileşenler

• ToggleGroup: Toggle’ları tek değerde toplar.
• IconButton: Basılı kalmayan ikon işlemi.
• Button: Metinli işlem.