Icon Button

Yalnız ikon kullanan kontroller için kompakt erişilebilir aksiyon.

IconButton.tsx

Şekiller, Rozetler & Temalar

Boyutlar & Yükleme Durumu

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/icon-button.json

Kullanım Örneği

import { IconButton } from "@/components/ui/IconButton"

<IconButton
  label="Bildirimleri aç"
  badge={3}
  badgeLabel="3 okunmamış bildirim"
>
  <BellIcon />
</IconButton>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
label	string	—	Butonun zorunlu erişilebilir adı.
variant	ButtonVariant	"ghost"	Butonun renk ve önem varyantı.
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Kare buton boyutu.
shape	ButtonShape \| "circle"	"rounded"	Köşe ve geometrik biçim.
badge	string \| number \| boolean	—	Köşedeki sayaç veya durum noktası.
badgeLabel	string	—	Badge bilgisinin ekran okuyucu açıklaması.
loading	boolean	false	Aksiyonu kapatır ve yükleme göstergesi sunar.
loadingLabel	string	—	Yükleme sırasında kullanılan erişilebilir ad.
tooltip	string \| false	—	Native tooltip metni veya tooltip kapatma seçeneği.