---
title: "Button"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Button with solid, outline, ghost, and soft variants. Multiple sizes, loading states, and full keyboard accessibility—no JavaScript required."
url: https://frutjam.com/tr/components/button
---

# Button Component

 Düğme bileşenleri, eylemleri tetikleyen veya kullanıcıları yeni sayfalara yönlendiren etkileşimli öğelerdir. Frutjam düğme sistemi, değiştirici sınıflar aracılığıyla birden fazla boyut, renk ve stil sunar; bunların tümü, çerçeveler ve projeler arasında sorunsuz bir şekilde çalışan hafif, son derece özelleştirilebilir düğmeler için Tailwind CSS yardımcı programı ilk yaklaşımıyla oluşturulmuştur.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf         | Tip         | Tanım                                                            |
| ------------- | ----------- | ---------------------------------------------------------------- |
| btn           | Temel       | Stil sahibi düğme öğesi                                          |
| btn-outline   | Stil        | Renkli kenarlıklı şeffaf dolgu                                   |
| btn-soft      | Stil        | Sessiz renkli arka plan                                          |
| btn-ghost     | Stil        | İnce arka plan yalnızca fareyle üzerine gelindiğinde görülebilir |
| btn-dashed    | Stil        | Kesikli kenarlık stili                                           |
| btn-plain     | Stil        | Arka plan veya kenarlık yok, yalnızca metin                      |
| btn-link      | Stil        | Metin köprüsü olarak tasarlandı                                  |
| btn-pill      | Stil        | Tamamen yuvarlak hap şekli                                       |
| btn-rounded   | Stil        | Orta yuvarlama                                                   |
| btn-circle    | Stil        | Simge düğmeleri için eşit genişlikte daire                       |
| btn-square    | Stil        | Yuvarlama olmadan kare şekil                                     |
| btn-block     | Değiştirici | Tam genişlikte engelleme düğmesi                                 |
| btn-wide      | Değiştirici | Ekstra yatay dolguyla varsayılandan daha geniş                   |
| btn-active    | Değiştirici | Etkin/basılı görsel durumu zorlar                                |
| btn-disabled  | Değiştirici | Düğme olmayan öğeler için devre dışı bırakılmış görünüm          |
| btn-xs        | Boyut       | Ekstra küçük                                                     |
| btn-sm        | Boyut       | Küçük                                                            |
| btn-md        | Boyut       | Orta (varsayılan)                                                |
| btn-lg        | Boyut       | Büyük                                                            |
| btn-xl        | Boyut       | Ekstra büyük                                                     |
| btn-2xl       | Boyut       | 2× ekstra büyük                                                  |
| btn-primary   | Renk        | Birincil tema rengi                                              |
| btn-secondary | Renk        | İkincil tema rengi                                               |
| btn-accent    | Renk        | Vurgu teması rengi                                               |
| btn-neutral   | Renk        | Nötr tema rengi                                                  |
| btn-info      | Renk        | Bilgi anlamsal rengi                                             |
| btn-success   | Renk        | Başarı anlamsal rengi                                            |
| btn-warning   | Renk        | Uyarı anlamsal rengi                                             |
| btn-error     | Renk        | Hata anlamsal rengi                                              |

## Temel Kullanım

## Düğme Boyutları

```html
<button class="btn btn-xs">Xsmall</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Xlarge</button>
<button class="btn btn-2xl">2XLarge</button>
```

## Düğme Renkleri

```html
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-neutral">Neutral</button>
```

## Düğme Stilleri

### Yumuşak Düğmeler

```html
<button class="btn btn-soft">Default</button>
<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-accent btn-soft">Accent</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-error btn-soft">Error</button>
<button class="btn btn-neutral btn-soft">Neutral</button>
```

### Kesikli Düğmeler

```html
<button class="btn btn-dashed">Default</button>
<button class="btn btn-dashed btn-primary">Primary</button>
<button class="btn btn-dashed btn-secondary">Secondary</button>
<button class="btn btn-dashed btn-accent">Accent</button>
<button class="btn btn-dashed btn-info">Info</button>
<button class="btn btn-dashed btn-success">Success</button>
<button class="btn btn-dashed btn-warning">Warning</button>
<button class="btn btn-dashed btn-error">Error</button>
<button class="btn btn-dashed btn-neutral">Neutral</button>
```

### Anahat Düğmeleri

```html
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-success">Success</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button class="btn btn-outline btn-neutral">Neutral</button>
```

### Hayalet Düğmeler

```html
<button class="btn-ghost btn">Default</button>
<button class="btn btn-ghost btn-primary">Primary</button>
<button class="btn btn-ghost btn-secondary">Secondary</button>
<button class="btn btn-ghost btn-accent">Accent</button>
<button class="btn btn-ghost btn-info">Info</button>
<button class="btn btn-ghost btn-success">Success</button>
<button class="btn btn-ghost btn-warning">Warning</button>
<button class="btn btn-ghost btn-error">Error</button>
<button class="btn btn-ghost btn-neutral">Neutral</button>
```

### Bağlantı Düğmeleri

```html
<button class="btn btn-link">Default</button>
<button class="btn btn-primary btn-link">Primary</button>
<button class="btn btn-secondary btn-link">Secondary</button>
<button class="btn btn-accent btn-link">Accent</button>
<button class="btn btn-info btn-link">Info</button>
<button class="btn btn-success btn-link">Success</button>
<button class="btn btn-warning btn-link">Warning</button>
<button class="btn btn-error btn-link">Error</button>
<button class="btn btn-neutral btn-link">Neutral</button>
```

## Düğme Şekilleri

### Daire Düğmesi

```html
<button class="btn btn-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
</button>
```

### Yuvarlak Düğme

```html
<button class="btn btn-error btn-rounded" aria-label="Remove from favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>
```

### Kare Düğme

```html
<button class="btn btn-primary btn-square" aria-label="Add to favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>
```

### Hap Düğmesi

```html
<button class="btn btn-primary btn-pill">
  Pill button
</button>
```

## Düğme Durumları

### Aktif Düğmeler

```html
<button class="btn btn-active">Default</button>
<button class="btn btn-primary btn-active">Primary</button>
<button class="btn btn-secondary btn-active">Secondary</button>
<button class="btn btn-accent btn-active">Accent</button>
<button class="btn btn-info btn-active">Info</button>
<button class="btn btn-success btn-active">Success</button>
<button class="btn btn-warning btn-active">Warning</button>
<button class="btn btn-error btn-active">Error</button>
<button class="btn btn-neutral btn-active">Neutral</button>
```

### Devre Dışı Düğmesi

```html
<button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button>
<button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>
```

## Düğme Genişlikleri

### Geniş Düğme

```html
<button class="btn btn-primary btn-wide">Wide</button>
```

### Engelle Düğmesi

```html
<button class="btn btn-primary btn-block">Block</button>
```

## Düğme Etiketi Esnekliği

```html
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="radio" aria-label="Radio" class="btn btn-primary">
<input type="checkbox" aria-label="Checkbox" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Button</button>
<a role="button" class="btn btn-primary">Link</a>
```