---
title: Düğmeler
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Başlık" />
</Frame>

Uygulamada kullanılan düğme ve düğme gruplarının bir listesi.

## Düğme

<Tabs>

<Tab title="Kullanım">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Başlık"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```
</Tab>

<Tab title="Özellikler">


| Özellikler    | Tür                   | Açıklama                                                                                             |
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| sınıfAdı      | string                | Ek stil için isteğe bağlı sınıf adı                                                                  |
| Simge         | `React.ComponentType` | Düğme içerisinde görüntülenen isteğe bağlı bir simge bileşeni                                        |
| başlık        | dize                  | Düğmenin metin içeriği                                                                               |
| tamGenişlik   | boolean               | Düğmenin konteynerinin tüm genişliğine yayılması gerekip gerekmediğini tanımlar                      |
| varyant       | dize                  | Düğmenin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir                |
| boyut         | dize                  | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                               |
| pozisyon      | dize                  | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ` ve `orta`  |
| vurgula       | dize                  | Düğmenin vurgu rengi. Seçenekler şunları içerir: `varsayılan`, `mavi`, ve `tehlike`                  |
| yakında       | boolean               | Düğmenin "yakında" olarak işaretlenip işaretlenmediğini gösterir (örneğin, yaklaşan özellikler için) |
| devre dışı    | boolean               | Düğmenin devre dışı olup olmadığını belirtir                                                         |
| odak          | boolean               | Düğmenin odaklanmış olup olmadığını belirler                                                         |
| tıklandığında | fonksiyon             | Kullanıcı düğmeye tıkladığında tetikleyen bir geri çağırma fonksiyonu                                |




</Tab>

</Tabs>

## Düğme Grubu

<Tabs>
<Tab title="Kullanım">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
  return (
    <ButtonGroup variant="primary" size="large" accent="blue" className>
      <Button
        className
        Icon={null}
        title="Buton 1"
        fullWidth={false}
        variant="primary"
        size="medium"
        position="standalone"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Buton 2"
        fullWidth={false}
        variant="secondary"
        size="medium"
        position="left"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Buton 3"
        fullWidth={false}
        variant="tertiary"
        size="medium"
        position="right"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
    </ButtonGroup>
  );
};

```
</Tab>

<Tab title="Özellikler">


| Özellikler | Tür       | Açıklama                                                                                              |
| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |
| varyant    | dize      | Grup içindeki düğmelerin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir |
| boyut      | dize      | Grup içindeki düğmelerin boyutu. İki seçenek vardır: `orta` ve `küçük`                                |
| vurgula    | metin     | Grup içindeki düğmelerin vurgu rengi. Seçenekler `varsayılan`, `mavi` ve `tehlike` içerir             |
| sınıfAdı   | dize      | Ek stil için isteğe bağlı sınıf adı                                                                   |
| çocuklar   | ReactNode | Grup içindeki bireysel düğmeleri temsil eden bir dizi React elemanı                                   |



</Tab>
</Tabs>

## Yüzer Düğme

<Tabs>
<Tab title="Kullanım">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Başlık"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
```

</Tab>

<Tab title="Özellikler">


| Özellikler            | Tür                   | Açıklama                                                                                          |
| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
| sınıfAdı              | dize                  | Ek stil için isteğe bağlı ad                                                                      |
| Simge                 | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                         |
| başlık                | dize                  | Düğmenin metin içeriği                                                                            |
| boyut                 | dize                  | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                            |
| pozisyon              | dize                  | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `orta`, `sağ` |
| gölgeUygula           | boolean               | Bir düğmeye gölge uygulayıp uygulamamayı belirler                                                 |
| bulanıklaştırmaUygula | boolean               | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler                                    |
| devre dışı            | boolean               | Düğmenin devre dışı olup olmadığını belirler                                                      |
| odak                  | boolean               | Düğmenin odaklanmış olup olmadığını gösterir                                                      |



</Tab>
</Tabs>

## Yüzer Düğme Grubu

<Tabs>
<Tab title="Kullanım">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Özellikler">


| Özellikler | Tür       | Açıklama                                                            | Varsayılan |
| ---------- | --------- | ------------------------------------------------------------------- | ---------- |
| boyut      | dize      | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`              | küçük      |
| çocuklar   | ReactNode | Grup içindeki bireysel düğmeleri temsil eden bir dizi React elemanı |            |



</Tab>

</Tabs>

## Yüzer Simge Düğmesi

<Tabs>
<Tab title="Kullanım">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Özellikler">


| Özellikler            | Tür                   | Açıklama                                                                                             |
| --------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| sınıfAdı              | dize                  | Ek stil için isteğe bağlı ad                                                                         |
| Simge                 | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                            |
| boyut                 | dize                  | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                               |
| pozisyon              | dize                  | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ`, ve `orta` |
| gölgeUygula           | boolean               | Bir düğmeye gölge uygulayıp uygulamamayı belirler                                                    |
| bulanıklaştırmaUygula | boolean               | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler                                       |
| devre dışı            | boolean               | Düğmenin devre dışı olup olmadığını belirler                                                         |
| odak                  | boolean               | Düğmenin odaklanmış olup olmadığını gösterir                                                         |
| tıklandığında         | fonksiyon             | Kullanıcı düğmeye tıkladığında tetikleyen bir geri çağırma fonksiyonu                                |
| etkin                 | boolean               | Düğmenin etkin bir durumda olup olmadığını belirler                                                  |



</Tab>

</Tabs>

## Yüzer Simge Düğme Grubu

<Tabs>
<Tab title="Kullanım">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Buton 1 tıklandı"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Buton 2 tıklandı"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Özellikler">


| Özellikler    | Tür  | Açıklama                                                                                                                                                                                                                                                 |
| ------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| sınıfAdı      | dize | Ek stil için isteğe bağlı ad                                                                                                                                                                                                                             |
| boyut         | dize | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                                                                                                                                                                                   |
| simgeDüğmeler | dizi | Her biri gruptaki bir simge düğmesini temsil eden nesnelerin bir dizisi. Her bir nesne, düğmede görüntülemek istediğiniz simge bileşenini, kullanıcı düğmeye tıkladığında çağırmak istediğiniz fonksiyonu ve düğmenin etkin olup olmadığını içermelidir. |



</Tab>

</Tabs>

## Işık Düğmesi

<Tabs>
<Tab title="Kullanım">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Başlık"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```


</Tab>

<Tab title="Özellikler">


| Özellikler    | Tür               | Açıklama                                                                   |
| ------------- | ----------------- | -------------------------------------------------------------------------- |
| sınıfAdı      | dize              | Ek stil için isteğe bağlı ad                                               |
| simge         | `React.ReactNode` | Düğmede görüntülemek istediğiniz simge                                     |
| başlık        | dize              | Düğmenin metin içeriği                                                     |
| vurgula       | dize              | Düğmenin vurgu rengi. Seçenekler şunları içerir: `secondary` ve `tertiary` |
| aktif         | boolean           | Düğmenin etkin bir durumda olup olmadığını belirler                        |
| devre dışı    | boolean           | Düğmenin devre dışı olup olmadığını belirler                               |
| odak          | boolean           | Düğmenin odakta olup olmadığını belirtir                                   |
| tıklandığında | fonksiyon         | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu      |




</Tab>

</Tabs>

## Işık Simge Düğmesi

<Tabs>
<Tab title="Kullanım">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Başlık"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```


</Tab>

<Tab title="Özellikler">


| Özellikler    | Tür                   | Açıklama                                                                   |
| ------------- | --------------------- | -------------------------------------------------------------------------- |
| sınıfAdı      | dize                  | Ek stil için isteğe bağlı ad                                               |
| testId        | dize                  | Düğme için test tanımlayıcısı                                              |
| Simge         | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                  |
| başlık        | dize                  | Düğmenin metin içeriği                                                     |
| boyut         | dize                  | Düğmenin boyutu. İki seçeneği vardır: `küçük` ve `orta`                    |
| vurgula       | dize                  | Düğmenin vurgu rengi. Seçenekler şunları içerir: `secondary` ve `tertiary` |
| aktif         | boolean               | Düğmenin etkin durumda olup olmadığını belirler                            |
| devre dışı    | boolean               | Düğmenin devre dışı olup olmadığını belirler                               |
| odak          | boolean               | Düğmenin odakta olup olmadığını belirtir                                   |
| tıklandığında | fonksiyon             | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu      |



</Tab>

</Tabs>

## Ana Düğme

<Tabs>
<Tab title="Kullanım">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Onay kutusu"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```


</Tab>

<Tab title="Özellikler">


| Özellikler                | Tür                              | Açıklama                                                                                           |
| ------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------- |
| başlık                    | dize                             | Düğmenin metin içeriği                                                                             |
| tamGenişlik               | boolean                          | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar                           |
| varyant                   | dize                             | Düğmenin görsel stil varyantı. Seçenekler şunları içerir: `primary` ve `secondary`                 |
| yakında                   | boolean                          | Düğmenin "yakında" (örneğin gelecek özellikler için) olarak işaretlenip işaretlenmediğini belirtir |
| Simge                     | `React.ComponentType`            | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                          |
| React `düğme` özellikleri | `React.ComponentProps<'button'>` | Tüm standart HTML düğme özellikleri desteklenir                                                    |




</Tab>

</Tabs>

## Yuvarlak Simge Düğmesi

<Tabs>
<Tab title="Kullanım">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```


</Tab>

<Tab title="Özellikler">


| Özellikler                | Tür                                             | Açıklama |
| ------------------------- | ----------------------------------------------- | -------- |
| Simge                     | `React.ComponentType`                           |          |
| React `düğme` özellikleri | `React.ButtonHTMLAttributes<HTMLButtonElement>` |          |



</Tab>

</Tabs>