IconButton

Toolbar'lar, kapatma aksiyonları ve yoğun satırlar için kare, yalnızca ikonlu bir buton. Görünen metin olmadığı için label zorunludur ve aria-label'a dönüşür.

KararlıKaynak kod

<IconButton label="Ayarlar" icon={<SettingsIcon />} />

Import

tsx

import { IconButton } from "@merid/react";

ghost (varsayılan) hover'a kadar şeffaftır; toolbar'lar ve kart köşeleri için doğru seçimdir. secondary butona görünür bir yüzey verir; primary accent dolgusunu kullanır ve primary bir Button kadar seyrek kullanılmalıdır.

<IconButton variant="ghost" label="Ayarlar" icon={<SettingsIcon />} />
<IconButton variant="secondary" label="Sil" icon={<TrashIcon />} />
<IconButton variant="primary" label="Öğe ekle" icon={<PlusIcon />} />

Boyutlar

32px (sm), 36px (md, varsayılan) ve 40px (lg) kareler.

<IconButton size="sm" label="Kapat" icon={<CloseIcon />} />
<IconButton size="md" label="Kapat" icon={<CloseIcon />} />
<IconButton size="lg" label="Kapat" icon={<CloseIcon />} />

Devre dışı

<IconButton variant="secondary" label="Sil" icon={<TrashIcon />} disabled />

API referansı

Ref'ini <button>'a iletir ve native buton attribute'larını olduğu gibi geçirir; children ve aria-label hariç (onun yerine label kullan). type varsayılan olarak "button"'dır.

Prop	Tip	Varsayılan	Açıklama
`label`Zorunlu	`string`	–	Erişilebilir ad, aria-label olarak render'lanır.
`icon`Zorunlu	`ReactNode`	–	İkon. aria-hidden bir span içinde render'lanır.
`variant`	`"ghost" \| "secondary" \| "primary"`	`"ghost"`	Görsel stil.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Kare boyutu: sm 32px, md 36px, lg 40px.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native buton tipi.
`disabled`	`boolean`	–	Native disabled attribute'u.

Stil verme

Seçici	Değerler
`.mrd-icon-button`	Kök `<button>`
`.mrd-icon-button__icon`	İkonu saran eleman (aria-hidden)
`data-variant`	`ghost` · `secondary` · `primary`
`data-size`	`sm` · `md` · `lg`

Component değişkeni: --mrd-icon-button-size, her boyut için --mrd-icon-button-sm/md/lg token'larından atanır.

css

.toolbar .mrd-icon-button {
  --mrd-icon-button-size: 28px;
}

Erişilebilirlik

label tiplerde zorunludur ve aria-label'a dönüşür; ikon aria-hidden'dır.
Etiketi ikonun şekline göre (“Çöp kutusu”) değil, aksiyona göre (“Faturayı sil”) yaz.
Gören fare kullanıcıları da etiketi keşfedebilsin diye Tooltip ile birlikte kullan.

Tuş	Ne yapar
`Tab`	Focus'u butona taşır.
`Enter`	Butonu tetikler.
`Space`	Butonu tetikler.

Kullanım ilkeleri

Yap

İkon butonları, ikonun tartışmasız olduğu bilinen aksiyonlar için kullan: kapat, ayarlar, daha fazla.

Kaçın

Ana ya da alışılmadık bir aksiyon için ikon buton kullanmak. Kullanıcı tahmin etmek zorunda kalıyorsa etiketli bir Button kullan.

İlgili sayfalar

Button: görünür etiketli aksiyonlar.
Tooltip: etiketi hover ve focus'ta gösterir.