LivaIconButton
DevExtreme Button üzerine kurulu, yalnızca ikon gösteren kare buton. İkon
children olarak verilir ve içerik şablonu üzerinden çizilir — bu nedenle
DevExtreme'in icon string prop'u yerine children kullanılmalıdır.
DevExtreme font ikonları (dx-icon-* sınıflı bir i öğesi) ya da herhangi
bir React ikonu (ör. lucide-react) çalışır.
import { LivaIconButton } from "@dataliva/livalib";
Varyantlar
variant altı hazır görünüm sunar; varsayılan ghost yalnızca ikonu
gösterir, arka planı hover'da belirir.
Boyutlar
size LivaButton ile aynı ölçeği kullanır ve butonun
yüksekliğini ve iç boşluğunu belirler: xxs 22px, xs 26px, sm 29px,
md 32px, lg 38px, xl 44px; genişlik en az yükseklik kadardır. size
verilmezse temanın varsayılanı (md ile aynı) geçerlidir; eski small /
medium / large değerleri sm / md / lg karşılığına çevrilir.
Kullanıcı Erişilebilirlik panelinde Buton ve sekme boyutu için bir değer
seçtiyse bu tercih tüm butonlara uygulanır ve size prop'u yok sayılır.
Lucide ikonları
children herhangi bir ReactNode kabul ettiği için lucide-react ikonları
doğrudan kullanılabilir.
Durumlar
disabled butonu devre dışı bırakır; hint fareyle üzerine gelindiğinde
ipucu gösterir; onClick tıklama olayını yakalar.
| Prop | Tip | Varsayılan |
|---|---|---|
children | ReactNode | — (ikon içeriği) |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost' | 'ghost' |
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'large' | — (tema varsayılanı, md) |
onClick | (e) => void | — |
disabled | boolean | false |
hint | string | — |
type | 'back' | 'danger' | 'default' | 'normal' | 'success' | — |
stylingMode | 'text' | 'outlined' | 'contained' | — |
className | string | — |
Ayrıca DevExtreme IButtonOptions'tan gelen prop'lar (text hariç)
desteklenir. variant zaten uygun DevExtreme mod sınıflarını uyguladığı
için type ve stylingMode genellikle gerekmez.