---
title: "Button"
description: "Beş varyant, yedi renk, beş boyut. Solid butonlar iç parlamayla yükseltilmiştir ve kendi renginde hafif bir ışıltı taşır."
---

<Callout type="info" title="Ne zaman kullanılır">
Tıklanabilir her aksiyon. Her bölümde tek bir solid buton.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/button
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Varyantlar

Ana aksiyon için solid, yanındakiler için outline, daha sakin her şey için soft ve ghost.

**Örnek: Varyantlar** (`button/variants`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/variants)

```tsx
import { Button } from "@/components/ui/button"

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Değişiklikleri kaydet</Button>
      <Button variant="soft">Kopyala</Button>
      <Button variant="outline">Dışa aktar</Button>
      <Button variant="ghost">Vazgeç</Button>
      <Button variant="link">Daha fazla bilgi</Button>
    </div>
  )
}
```

### Renkler

Her varyant her rengi alır. Varsayılan neutral; rengi yalnızca bir anlam taşıyorsa kullanın.

**Örnek: Renkler** (`button/colors`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/colors?align=stretch)

```tsx
import { Button } from "@/components/ui/button"

const colors = ["neutral", "blue", "violet", "green", "lime", "amber", "red"] as const
const variants = ["solid", "soft", "outline", "ghost"] as const

export default function ButtonColors() {
  return (
    <div className="grid w-full grid-cols-[auto_repeat(7,minmax(0,1fr))] items-center gap-x-3 gap-y-4 overflow-x-auto">
      <span />
      {colors.map((color) => (
        <span key={color} className="text-center font-mono text-[11px] text-muted-foreground">
          {color}
        </span>
      ))}
      {variants.map((variant) => (
        <div key={variant} className="contents">
          <span className="pr-2 font-mono text-[11px] text-muted-foreground">{variant}</span>
          {colors.map((color) => (
            <div key={color} className="flex justify-center">
              <Button variant={variant} color={color} size="sm">
                Button
              </Button>
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}
```

### Kullanımda

Birincil aksiyon en sonda. Yıkıcı onaylar color="red" kullanır, güvenli seçenek sakin kalır.

**Örnek: Kullanımda** (`button/actions`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/actions)

```tsx
import { Button } from "@/components/ui/button"

export default function ButtonActions() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <div className="flex justify-end gap-2">
        <Button variant="outline">Vazgeç</Button>
        <Button>Ayarları kaydet</Button>
      </div>
      <div className="flex justify-end gap-2">
        <Button variant="ghost">Uygulamayı tut</Button>
        <Button color="red">Kaldır</Button>
      </div>
      <div className="flex justify-end gap-2">
        <Button variant="outline">Daha sonra</Button>
        <Button color="blue">Pazaryerini bağla</Button>
      </div>
    </div>
  )
}
```

### Boyutlar

28 / 32 / 36 / 40px. Varsayılan 36px, ikas panelinin yoğunluğuna uyar.

**Örnek: Boyutlar** (`button/sizes`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/sizes)

```tsx
import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Çok küçük</Button>
      <Button size="sm">Küçük</Button>
      <Button>Varsayılan</Button>
      <Button size="lg">Büyük</Button>
      <Button size="icon-xs" variant="outline" aria-label="Ekle">
        <PlusIcon />
      </Button>
      <Button size="icon-sm" variant="outline" aria-label="Ekle">
        <PlusIcon />
      </Button>
      <Button size="icon" variant="outline" aria-label="Ekle">
        <PlusIcon />
      </Button>
      <Button size="icon-lg" variant="outline" aria-label="Ekle">
        <PlusIcon />
      </Button>
    </div>
  )
}
```

### İkonlu

Boşluğun ayarlanması için ikonu data-icon ile işaretleyin.

**Örnek: İkonlu** (`button/with-icon`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/with-icon)

```tsx
import { ArrowUpRightIcon, DownloadIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonWithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <PlusIcon data-icon="inline-start" />
        Kampanya oluştur
      </Button>
      <Button variant="outline">
        <DownloadIcon data-icon="inline-start" />
        CSV olarak dışa aktar
      </Button>
      <Button variant="ghost">
        Mağazada görüntüle
        <ArrowUpRightIcon data-icon="inline-end" />
      </Button>
    </div>
  )
}
```

### Yükleniyor

Genişliği korur, spinner gösterir, tıklamaları engeller.

**Örnek: Yükleniyor** (`button/loading`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button/loading)

```tsx
import * as React from "react"

import { Button } from "@/components/ui/button"

export default function ButtonLoading() {
  const [saving, setSaving] = React.useState(false)

  function save() {
    setSaving(true)
    setTimeout(() => setSaving(false), 1500)
  }

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button loading={saving} onClick={save}>
        Ayarları kaydet
      </Button>
      <Button variant="outline" loading>
        Ürünler eşitleniyor
      </Button>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Fiil + nesne ile etiketleyin: “Siparişleri dışa aktar”.
- Solid butonu grubun sonuna koyun.
- Aksiyonlar için ekran başına tek renk kullanın; geri kalanı neutral.

**Yapmayın:**

- Kendi gradient veya gölgenizi eklemeyin; varyantlarda zaten var.
- aria-label olmadan yalnızca ikonlu buton kullanmayın.

## API

### `Button`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `color` | `keyof typeof colors` | `"neutral"` | Palet rengi. Her varyantla çalışır. |
| `size` | `"xs" \| "sm" \| "default" \| "lg" \| "icon-xs" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | Yükseklik 28 / 32 / 36 / 40px. |
| `variant` | `ButtonVariant \| keyof typeof aliases` | - | Vurgu düzeyi. shadcn adları (default, secondary, destructive) alias olarak çalışmaya devam eder. |
| `asChild` | `boolean` | `false` | Alt öğe olarak render eder, örn. next/link. |
| `loading` | `boolean` | `false` | Spinner ve aria-busy. Genişlik değişmez. |