> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Düğmeler

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/views/filter.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=457ca3d2bad4bdf406ab6b01f22e0bf2" alt="Başlık" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

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

## Düğme

<Tabs>
  <Tab title="Kullanım">
    ```jsx theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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>