---
title: Кнопки
icon: hand-pointer
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Заголовок" />
</Frame>

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

## Кнопка

<Tabs>

<Tab title="Использование">

```jsx
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
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
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
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
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
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
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
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
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
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>