# Buton Bileşeni

Butonlar, e-posta gönderme, belge paylaşma veya gönderi beğenme gibi bazı işlemleri yürütmek için kullanılır.

## Kullanım Şekli {#usage}

Bileşeni ihtiyacınıza göre içe aktarın:

```js
import 'mdui/components/button.js';
```

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

```ts
import type { Button } from 'mdui/components/button.js';
```

Kullanım örneği:

```html
<mdui-button>Buton</mdui-button>
```

## Örnekler {#examples}

### Şekil {#example-variant}

Butonun şeklini ayarlamak için `variant` özniteliğini kullanın.

```html
<mdui-button variant="elevated">Yükseltilmiş</mdui-button>
<mdui-button variant="filled">Dolu</mdui-button>
<mdui-button variant="tonal">Tonlu</mdui-button>
<mdui-button variant="outlined">Kenarlıklı</mdui-button>
<mdui-button variant="text">Metin</mdui-button>
```

### Tam Genişlik {#example-full-width}

`full-width` özniteliğini eklemek, butonun ana öğesinin tüm genişliğini kaplamasını sağlar.

```html
<mdui-button full-width>Buton</mdui-button>
```

### Simge {#example-icon}

`icon` ve `end-icon` özniteliklerini ayarlayarak, butonun soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca `icon` ve `end-icon` slot'ları aracılığıyla da butonun soluna ve sağına öğeler ekleyebilirsiniz.

```html
<mdui-button icon="search" end-icon="arrow_forward">Simge</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>
```

### Bağlantı {#example-link}

`href` özniteliğini ayarlamak, butonu bir bağlantıya dönüştürür. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: `download`, `target`, `rel`.

```html
<mdui-button href="https://www.mdui.org" target="_blank">Bağlantı</mdui-button>
```

### Devre Dışı ve yükleniyor durumu {#example-disabled}

Butonu devre dışı bırakmak için `disabled` özniteliğini ekleyin; butona yükleniyor durumu eklemek için `loading` özniteliğini ekleyin.

```html
<mdui-button disabled>Devre Dışı</mdui-button>
<mdui-button loading>Yükleniyor</mdui-button>
<mdui-button loading disabled>Yükleniyor ve Devre Dışı</mdui-button>
```

## mdui-button API

### Özellikler

<table>
<thead>
  <tr>
    <th>Öznitelik</th>
    <th>Özellik</th>
    <th>Reflect</th>
    <th>Tür</th>
    <th>Varsayılan</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;elevated&#39; | &#39;filled&#39; | &#39;tonal&#39; | &#39;outlined&#39; | &#39;text&#39;</td>
    <td>'filled'</td>
    <td><p>Butonun şekli. Olası değerler:</p>
<ul>
<li><code>elevated</code>: Gölgeli buton, butonu arka plandan görsel olarak ayırmak gerektiğinde kullanılır</li>
<li><code>filled</code>: Güçlü görsel etki, &#39;Kaydet&#39;, &#39;Onayla&#39; gibi önemli işlemlerin son adımı için uygundur</li>
<li><code>tonal</code>: Görsel etkisi <code>filled</code> ve <code>outlined</code> arasındadır, &#39;İleri&#39; gibi orta-yüksek öncelikli işlemler için uygundur</li>
<li><code>outlined</code>: Kenarlıklı buton, &#39;Geri&#39; gibi orta öncelikli ve ikincil işlemler için uygundur</li>
<li><code>text</code>: Metin butonu, en düşük öncelikli işlemler için uygundur</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Ana öğenin genişliğini doldurup doldurmayacağı.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Soldaki Material Icons simge adı. <code>slot=&quot;icon&quot;</code> ile de ayarlanabilir.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Sağdaki Material Icons simge adı. <code>slot=&quot;end-icon&quot;</code> ile de ayarlanabilir.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Bağlantının hedef URL&#39;si.</p>
<p>Bu özellik ayarlandığında, bileşen dahili olarak bir <code>&lt;a&gt;</code> öğesi olarak işlenir ve bağlantı ile ilgili özellikler kullanılabilir hale gelir.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>İndirme bağlantısının hedefi.</p>
<p><strong>Not</strong>: Bu özellik yalnızca <code>href</code> özelliği belirtildiğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>target</td>
    <td>target</td>
    <td>true</td>
    <td>&#39;_blank&#39; | &#39;_parent&#39; | &#39;_self&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Bağlantının nasıl açılacağı. Olası değerler:</p>
<ul>
<li><code>_blank</code>: Bağlantıyı yeni bir pencerede açar</li>
<li><code>_parent</code>: Bağlantıyı üst çerçevede açar</li>
<li><code>_self</code>: Varsayılan. Bağlantıyı aynı çerçevede açar</li>
<li><code>_top</code>: Bağlantıyı tam pencerede açar</li>
</ul>
<p><strong>Not</strong>: Bu özellik yalnızca <code>href</code> özelliği belirtildiğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>rel</td>
    <td>rel</td>
    <td>true</td>
    <td>&#39;alternate&#39; | &#39;author&#39; | &#39;bookmark&#39; | &#39;external&#39; | &#39;help&#39; | &#39;license&#39; | &#39;me&#39; | &#39;next&#39; | &#39;nofollow&#39; | &#39;noreferrer&#39; | &#39;opener&#39; | &#39;prev&#39; | &#39;search&#39; | &#39;tag&#39;</td>
    <td></td>
    <td><p>Mevcut belge ile bağlantı verilen belge arasındaki ilişki. Olası değerler:</p>
<ul>
<li><code>alternate</code>: Mevcut belgenin alternatif sürümü</li>
<li><code>author</code>: Mevcut belgenin veya makalenin yazarı</li>
<li><code>bookmark</code>: En yakın ata bölüm için kalıcı bağlantı</li>
<li><code>external</code>: Başvurulan belge, mevcut belgeyle aynı sitede değil</li>
<li><code>help</code>: İlgili yardım belgesine bağlantı</li>
<li><code>license</code>: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadır</li>
<li><code>me</code>: Mevcut belge, bağlantı içeriğinin sahibini temsil eder</li>
<li><code>next</code>: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedir</li>
<li><code>nofollow</code>: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaz</li>
<li><code>noreferrer</code>: <code>Referer</code> başlığını içermez. <code>noopener</code> etkisine benzer</li>
<li><code>opener</code>: Köprü, üst düzey bir gezinme bağlamı oluşturuyorsa (yani <code>target</code> özellik değeri <code>_blank</code> ise), yardımcı bir gezinme bağlamı oluşturur</li>
<li><code>prev</code>: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedir</li>
<li><code>search</code>: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlar</li>
<li><code>tag</code>: Mevcut belge için uygun bir etiket sağlar (belirtilen adres tarafından tanımlanır)</li>
</ul>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği belirtildiğinde kullanılabilir.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Sekme tuşu ile odak geçişi yapılırken öğenin sırası.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Devre dışı olup olmadığı.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Yüklenme durumunda olup olmadığı.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Form verileriyle birlikte gönderilen buton adı.</p>
<p><strong>Not</strong>: Bu özellik yalnızca <code>href</code> özelliği belirtilmediğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Form verileriyle birlikte gönderilen buton başlangıç değeri.</p>
<p><strong>Not</strong>: Bu özellik yalnızca <code>href</code> özelliği belirtilmediğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>type</td>
    <td>type</td>
    <td>true</td>
    <td>&#39;submit&#39; | &#39;reset&#39; | &#39;button&#39;</td>
    <td>'button'</td>
    <td><p>Butonun türü. Varsayılan tür <code>button</code>&#39;dır. Olası türler:</p>
<ul>
<li><code>submit</code>: Butona tıklandığında form verilerini sunucuya gönderir</li>
<li><code>reset</code>: Butona tıklandığında formdaki tüm alanları başlangıç değerlerine sıfırlar</li>
<li><code>button</code>: Bu türdeki butonların varsayılan bir davranışı yoktur</li>
</ul>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği belirtilmediğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>İlişkili <code>&lt;form&gt;</code> öğesi. Bu özelliğin değeri, aynı sayfadaki bir <code>&lt;form&gt;</code> öğesinin <code>id</code>&#39;si olmalıdır.</p>
<p>Bu özellik belirtilmezse, öğe bir <code>&lt;form&gt;</code> öğesinin alt öğesi olmalıdır. Bu özellik sayesinde öğeyi yalnızca <code>&lt;form&gt;</code> öğesinin alt öğesi olarak değil, sayfanın herhangi bir yerine yerleştirebilirsiniz.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği belirtilmediğinde geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Formun gönderileceği URL&#39;yi belirtir.</p>
<p>Bu özellik belirtilirse, <code>&lt;form&gt;</code> öğesinin <code>action</code> özelliğini geçersiz kılar.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği belirtilmediğinde ve <code>type=&quot;submit&quot;</code> olduğunda geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>formenctype</td>
    <td>formEnctype</td>
    <td>true</td>
    <td>&#39;application/x-www-form-urlencoded&#39; | &#39;multipart/form-data&#39; | &#39;text/plain&#39;</td>
    <td></td>
    <td><p>Formu sunucuya gönderirken kullanılacak içerik türünü belirtir. Olası değerler:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: Bu özellik belirtilmediğinde varsayılan değer</li>
<li><code>multipart/form-data</code>: Form <code>&lt;input type=&quot;file&quot;&gt;</code> öğesi içerdiğinde kullanılır</li>
<li><code>text/plain</code>: HTML5 ile eklenmiştir, hata ayıklama için kullanılır</li>
</ul>
<p>Bu özellik belirtilirse, <code>&lt;form&gt;</code> öğesinin <code>enctype</code> özelliğini geçersiz kılar.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği belirtilmediğinde ve <code>type=&quot;submit&quot;</code> olduğunda geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>formmethod</td>
    <td>formMethod</td>
    <td>true</td>
    <td>&#39;post&#39; | &#39;get&#39;</td>
    <td></td>
    <td><p>Form gönderilirken kullanılacak HTTP yöntemini belirtir. Olası değerler:</p>
<ul>
<li><code>post</code>: Form verileri form gövdesine dahil edilerek sunucuya gönderilir</li>
<li><code>get</code>: Form verileri, <code>?</code> ayırıcı ile formun URI özelliğine eklenir ve oluşturulan URI sunucuya gönderilir. Formun yan etkisi olmadığında ve yalnızca ASCII karakterleri içerdiğinde bu yöntem kullanılır</li>
</ul>
<p>Bu özellik ayarlandığında, <code>&lt;form&gt;</code> öğesinin <code>method</code> özelliğini geçersiz kılar.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği ayarlanmadığında ve <code>type=&quot;submit&quot;</code> olduğunda geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>formnovalidate</td>
    <td>formNoValidate</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Bu özellik ayarlandığında, form gönderilirken form doğrulaması yapılmaz.</p>
<p>Bu özellik ayarlandığında, <code>&lt;form&gt;</code> öğesinin <code>novalidate</code> özelliğini geçersiz kılar.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği ayarlanmadığında ve <code>type=&quot;submit&quot;</code> olduğunda geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>formtarget</td>
    <td>formTarget</td>
    <td>true</td>
    <td>&#39;_self&#39; | &#39;_blank&#39; | &#39;_parent&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Form gönderildikten sonra alınan yanıtın nerede görüntüleneceğini belirtir. Olası değerler:</p>
<ul>
<li><code>_self</code>: Varsayılan seçenek, aynı çerçevede açar</li>
<li><code>_blank</code>: Yeni bir pencerede açar</li>
<li><code>_parent</code>: Üst çerçevede açar</li>
<li><code>_top</code>: Tam pencerede açar</li>
</ul>
<p>Bu özellik ayarlandığında, <code>&lt;form&gt;</code> öğesinin <code>target</code> özelliğini geçersiz kılar.</p>
<p><strong>Not</strong>: Yalnızca <code>href</code> özelliği ayarlanmadığında ve <code>type=&quot;submit&quot;</code> olduğunda geçerlidir.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>Form doğrulama durumu nesnesi. Ayrıntılar için <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a>&#39;e bakın.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Form doğrulaması başarısız olduğunda bu özellik bir bilgilendirme mesajı içerir. Doğrulama başarılı olduğunda ise boş bir dize olur.</p>
</td>
  </tr>
</tbody>
</table>

### Yöntemler

<table>
<thead>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Öğeye fare tıklamasını simüle eder.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Odağı geçerli öğeye ayarlar.</p>
<p>Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır:</p>
<ul>
<li><code>preventScroll</code>: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği <code>true</code> olarak ayarlayabilirsiniz.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Odağı geçerli öğeden kaldırır.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse <code>false</code> döndürür ve <code>invalid</code> olayını tetikler; geçerse <code>true</code> döndürür.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse <code>false</code> döndürür ve <code>invalid</code> olayını tetikler; geçerse <code>true</code> döndürür.</p>
<p>Doğrulama başarısız olduğunda, bileşen üzerinde doğrulama başarısızlığına dair bir ipucu da gösterir.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Özel bir hata ipucu metni ayarlar. Bu metin boş değilse, alanın doğrulamayı geçmediği anlamına gelir.</p>
</td>
  </tr>
</tbody>
</table>

### Olaylar

<table>
<thead>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Odak alındığında tetiklenir.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Odak kaybedildiğinde tetiklenir.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Form alanı doğrulaması başarısız olduğunda tetiklenir.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Varsayılan</td>
    <td><p>Butonun metni.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Butonun solundaki öğe.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Butonun sağındaki öğe.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>İçteki <code>&lt;button&gt;</code> veya <code>&lt;a&gt;</code> öğesi.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Butonun metni.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Butonun solundaki simge.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Butonun sağındaki simge.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>Yüklenme durumundaki <code>&lt;mdui-circular-progress&gt;</code> öğesi.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Property

<table>
<thead>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak <a href="/tr/docs/2/styles/design-tokens#shape-corner">Design Tokens&#39;a</a> başvurmanız önerilir.</p>
</td>
  </tr>
</tbody>
</table>