# LivaIconButton
Package: @dataliva/livalib
Description: @dataliva/livalib yalnızca ikon içeren buton bileşeni.

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.

```tsx
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.

**Örnek — Varyantlar:**

```tsx
<LivaIconButton variant="primary"><i className="dx-icon-plus" /></LivaIconButton>
<LivaIconButton variant="secondary"><i className="dx-icon-edit" /></LivaIconButton>
<LivaIconButton variant="success"><i className="dx-icon-check" /></LivaIconButton>
<LivaIconButton variant="warning"><i className="dx-icon-clock" /></LivaIconButton>
<LivaIconButton variant="danger"><i className="dx-icon-trash" /></LivaIconButton>
<LivaIconButton variant="ghost"><i className="dx-icon-overflow" /></LivaIconButton>
```

## Boyutlar

**Örnek — Boyutlar:**

```tsx
<LivaIconButton variant="primary" size="small"><i className="dx-icon-search" /></LivaIconButton>
<LivaIconButton variant="primary" size="medium"><i className="dx-icon-search" /></LivaIconButton>
<LivaIconButton variant="primary" size="large"><i className="dx-icon-search" /></LivaIconButton>
```

## Lucide ikonları

`children` herhangi bir ReactNode kabul ettiği için lucide-react ikonları
doğrudan kullanılabilir.

**Örnek — Lucide ikonları:**

```tsx
import { Plus, Pencil, Trash2, Settings } from "lucide-react";

<LivaIconButton variant="primary"><Plus size={18} /></LivaIconButton>
<LivaIconButton variant="secondary"><Pencil size={16} /></LivaIconButton>
<LivaIconButton variant="danger"><Trash2 size={16} /></LivaIconButton>
<LivaIconButton variant="ghost"><Settings size={18} /></LivaIconButton>
```

## Durumlar

`disabled` butonu devre dışı bırakır; `hint` fareyle üzerine gelindiğinde
ipucu gösterir; `onClick` tıklama olayını yakalar.

**Örnek — Durumlar:**

```tsx
<LivaIconButton variant="primary" disabled><i className="dx-icon-save" /></LivaIconButton>
<LivaIconButton variant="ghost" disabled><i className="dx-icon-trash" /></LivaIconButton>
<LivaIconButton variant="primary" hint="Bildirimler" onClick={() => alert("Tıklandı!")}>
  <i className="dx-icon-bell" />
</LivaIconButton>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `children` | `ReactNode` | — (ikon içeriği) |
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'ghost'` | `'ghost'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `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.