IconButton

Ne zaman kullanılır

IconButton, anlamı ikonla yerleşik olan sık işlemler içindir: kapatma, ekleme, diğer işlemler menüsü, tablo satırındaki silme.

Ne zaman kullanılmaz

• İkonun anlamı yerleşik değilse: Metinli Button kullanın; “Dışa aktar” gibi işlemler ikonla tek başına anlaşılmaz.
• Sayfanın ana işlemi için: Ana işlem metin taşır; Button primary kullanın.
• Başka sayfaya gitmek için: Link kullanın.
• Açık ya da kapalı kalan bir ayar için: Toggle kullanın.

Anatomi

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return <IconButton icon="x" label="Kapat" />;
}

1. Kutu: size ile 32, 36 ya da 40 px kare; köşe yarıçapı button-radius, circle ile tam yuvarlak.
2. İkon: Kayıtlı ikon (icon); button-icon-size-* boyutunda, aria-hidden.
3. Erişilebilir ad: Görünmez; label metni aria-label olarak verilir.

Davranış

• Tıklama, Enter ve Space işlemi çalıştırır; Base UI Button üzerine kuruludur.
• loading iken ikon görünmez olur ama yerini korur; ortada gösterge döner ve tıklamalar yok sayılır. Buton odakta kalır.
• disabled butonu sekme sırasından çıkarır. focusableWhenDisabled ile aria-disabled taşır ve odak alır.
• className yalnızca dış boşluk ve konum içindir.

Yönergeler

• Her IconButton’a fiille başlayan bir label verin: “Kapat”, “Sil”, “Ekle”.
• Bir araç çubuğunda aynı size ve variant kullanın; ilişkili butonları ButtonGroup ile gruplayın.
• Silen işlemler için tone="danger" kullanın ve geri alma ya da onay sunun.
• Dokunmatik ekranlarda en az md kullanın (dokunmatik ekranda 40 px); sm yalnızca yoğun tablolar içindir.

İçerik

• label kısa bir fiil ya da fiil öbeğidir; nokta koymayın.
• Aynı ikona her yerde aynı adı verin.

Türkçe	İngilizce
Kapat	Close
Ekle	Add
Sil	Delete
Diğer işlemler	More actions

Cam

variant="glass" fotoğraf ya da video üstündeki yalnızca ikonlu kontroller içindir, ör. kapatma butonu. Koyu bir data-backdrop içinde karartma katmanlı, daha şeffaf camı kullanır.

İlgili bileşenler

• Button: Metin taşıyan işlem.
• Icon: İkon kaydı ve boyutları.
• ButtonGroup: İlişkili butonları gruplar.
• Toggle: Basılı kalan iki durumlu buton.