> ## 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.

# Кнопки

<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="Заголовок" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

Список кнопок и групп кнопок, использованных в приложении.

## Кнопка

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    import { Button } from "@/ui/input/button/components/Button";

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

  <Tab title="Свойства">
    | Свойства     | Тип                   | Описание                                                                                                     |
    | ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ |
    | className    | строка                | Дополнительное имя класса для дополнительной стилизации                                                      |
    | Иконка       | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке                                                      |
    | заголовок    | строка                | Текстовое содержимое кнопки                                                                                  |
    | полнаяШирина | логическое            | Определяет, должна ли кнопка занимать всю ширину контейнера                                                  |
    | вариант      | строка                | Визуальный стиль кнопки. Включает опции `primary`, `secondary` и `tertiary`                                  |
    | размер       | строка                | Размер кнопки. Есть два варианта: `small` и `medium`                                                         |
    | позиция      | строка                | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `right` и `middle` |
    | акцент       | строка                | Акцентный цвет кнопки. Включает опции: `default`, `blue`, и `danger`                                         |
    | скоро        | булево                | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций)                                |
    | отключено    | булево                | Определяет, отключена кнопка или нет                                                                         |
    | фокус        | булево                | Определяет, имеет ли кнопка фокус                                                                            |
    | onClick      | функция               | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку                            |
  </Tab>
</Tabs>

## Группа кнопок

<Tabs>
  <Tab title="Использование">
    ```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="Button 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="Button 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="Button 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="Свойства">
    | Свойства  | Тип       | Описание                                                                                           |
    | --------- | --------- | -------------------------------------------------------------------------------------------------- |
    | вариант   | строка    | Визуальный вариант оформления кнопок в группе. Включает опции `primary`, `secondary`, и `tertiary` |
    | размер    | строка    | Размер кнопок в группе. Имеет два варианта: `medium` и `small`                                     |
    | акцент    | строка    | Акцентный цвет кнопок в группе. Включает опции `default`, `blue` и `danger`                        |
    | className | строка    | Дополнительное имя класса для дополнительной стилизации                                            |
    | children  | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе                                   |
  </Tab>
</Tabs>

## Плавающая кнопка

<Tabs>
  <Tab title="Использование">
    ```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="Title"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Свойства">
    | Свойства           | Тип                   | Описание                                                                                                    |
    | ------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------- |
    | className          | строка                | Необязательное имя для дополнительной стилизации                                                            |
    | Иконка             | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке                                                     |
    | заголовок          | строка                | Текстовое содержимое кнопки                                                                                 |
    | размер             | строка                | Размер кнопки. Есть два варианта: `small` и `medium`                                                        |
    | позиция            | строка                | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `middle`, `right` |
    | применить тень     | булево                | Определяет, применять ли тень к кнопке                                                                      |
    | применить размытие | булево                | Определяет, применять ли размытие к кнопке                                                                  |
    | отключено          | булево                | Определяет, отключена ли кнопка                                                                             |
    | фокус              | булево                | Указывает, имеет ли кнопка фокус                                                                            |
  </Tab>
</Tabs>

## Группа плавающих кнопок

<Tabs>
  <Tab title="Использование">
    ```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="Свойства">
    | Свойства | Тип       | Описание                                                         | По умолчанию |
    | -------- | --------- | ---------------------------------------------------------------- | ------------ |
    | размер   | строка    | Размер кнопки. Есть два варианта: `small` и `medium`             | маленький    |
    | children | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе |              |
  </Tab>
</Tabs>

## Плавающая кнопка с иконкой

<Tabs>
  <Tab title="Использование">
    ```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="Свойства">
    | Свойства           | Тип                   | Описание                                                                                                     |
    | ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ |
    | className          | строка                | Необязательное имя для дополнительной стилизации                                                             |
    | Иконка             | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке                                                      |
    | размер             | строка                | Размер кнопки. Есть два варианта: `small` и `medium`                                                         |
    | позиция            | строка                | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `right` и `middle` |
    | применить тень     | булево                | Определяет, применять ли тень к кнопке                                                                       |
    | применить размытие | булево                | Определяет, применять ли размытие к кнопке                                                                   |
    | отключено          | булево                | Определяет, отключена ли кнопка                                                                              |
    | фокус              | булево                | Указывает, имеет ли кнопка фокус                                                                             |
    | onClick            | функция               | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку                            |
    | активен            | булево                | Определяет, находится ли кнопка в активном состоянии                                                         |
  </Tab>
</Tabs>

## Группа плавающих кнопок с иконками

<Tabs>
  <Tab title="Использование">
    ```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("Button 1 clicked"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("Button 2 clicked"),
          isActive: true,
        },
      ];

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

    ```
  </Tab>

  <Tab title="Свойства">
    | Свойства          | Тип    | Описание                                                                                                                                                                                                                                                                                       |
    | ----------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | className         | строка | Необязательное имя для дополнительной стилизации                                                                                                                                                                                                                                               |
    | размер            | строка | Размер кнопки. Есть два варианта: `small` и `medium`                                                                                                                                                                                                                                           |
    | кнопки с иконками | массив | Массив объектов, каждый из которых представляет собой кнопку с иконкой в группе. Каждый объект должен включать компонент иконки, который вы хотите отобразить на кнопке, функцию, которую вы хотите вызвать при нажатии на кнопку, и информацию о том, должна ли кнопка быть активной или нет. |
  </Tab>
</Tabs>

## Легкая кнопка

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    import { LightButton } from "@/ui/input/button/components/LightButton";

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

  <Tab title="Свойства">
    | Свойства  | Тип               | Описание                                                                          |
    | --------- | ----------------- | --------------------------------------------------------------------------------- |
    | className | строка            | Необязательное имя для дополнительной стилизации                                  |
    | иконка    | `React.ReactNode` | Иконка, которую вы хотите отобразить на кнопке                                    |
    | заголовок | строка            | Текстовое содержимое кнопки                                                       |
    | акцент    | строка            | Акцентный цвет кнопки. Опции включают: `secondary` и `tertiary`                   |
    | активный  | булево            | Определяет, находится ли кнопка в активном состоянии                              |
    | отключено | булево            | Определяет, отключена ли кнопка                                                   |
    | фокус     | булево            | Указывает, имеет ли кнопка фокус                                                  |
    | onClick   | функция           | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
  </Tab>
</Tabs>

## Легкая кнопка с иконкой

<Tabs>
  <Tab title="Использование">
    ```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="Title"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Свойства">
    | Свойства            | Тип                   | Описание                                                                          |
    | ------------------- | --------------------- | --------------------------------------------------------------------------------- |
    | className           | строка                | Необязательное имя для дополнительной стилизации                                  |
    | идентификатор теста | строка                | Идентификатор теста для кнопки                                                    |
    | Иконка              | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке                           |
    | заголовок           | строка                | Текстовое содержимое кнопки                                                       |
    | размер              | строка                | Размер кнопки. Есть два варианта: `small` и `medium`                              |
    | акцент              | строка                | Акцентный цвет кнопки. Опции включают: `secondary` и `tertiary`                   |
    | активный            | булево                | Определяет, находится ли кнопка в активном состоянии                              |
    | отключено           | булево                | Определяет, отключена ли кнопка                                                   |
    | фокус               | булево                | Указывает, имеет ли кнопка фокус                                                  |
    | onClick             | функция               | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
  </Tab>
</Tabs>

## Главная кнопка

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

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

  <Tab title="Свойства">
    | Свойства             | Тип                              | Описание                                                                      |
    | -------------------- | -------------------------------- | ----------------------------------------------------------------------------- |
    | заголовок            | строка                           | Текстовое содержимое кнопки                                                   |
    | полнаяШирина         | булево                           | Определяет, должна ли кнопка занимать всю ширину контейнера                   |
    | вариант              | строка                           | Визуальный стиль кнопки. Опции включают `primary` и `secondary`               |
    | скоро                | булево                           | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций) |
    | Иконка               | `React.ComponentType`            | Необязательный компонент иконки, отображаемый на кнопке                       |
    | React `button` props | `React.ComponentProps<'button'>` | Все стандартные свойства кнопки HTML поддерживаются                           |
  </Tab>
</Tabs>

## Круглая кнопка с иконкой

<Tabs>
  <Tab title="Использование">
    ```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="Свойства">
    | Свойства             | Тип                                             | Описание |
    | -------------------- | ----------------------------------------------- | -------- |
    | Иконка               | `React.ComponentType`                           |          |
    | React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |          |
  </Tab>
</Tabs>