> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/knopka.md).

# Кнопка

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FELsbqm5r31Rwx5MlsxmV%2Fbutton.png?alt=media\&token=7dcc93a3-835b-4b86-811a-58ddbbd8b057)

Компонент для создания кнопок и управления их поведением.

**Свойства:**

* *<mark style="color:purple;">title</mark>* - название, отображаемое на кнопке
* *<mark style="color:purple;">role</mark>* - основная роль кнопки: Обычная (**button**) / Отправка формы (**submit**) / ~~Закрытие модального окна (**closeModal** - deprecated~~[~~)~~](#user-content-fn-1)[^1]
* *<mark style="color:purple;">outlined</mark>* - параметр, отвечающий за  отображение обводки кнопки
* *<mark style="color:purple;">rounded</mark>* - параметр для применения закругления краёв кнопки. В случае, если у кнопки нет описания *<mark style="color:purple;">title</mark>*, но есть иконка *<mark style="color:purple;">icon</mark>*, то активируется круглый вариант отображения элемента
* *<mark style="color:purple;">filled</mark>* - параметр, активирующий заливку фона кнопки. При выборе данного параметра пропадает обводка
* *<mark style="color:purple;">hint</mark>* - подсказка к кнопке. Отображается справа от названия.
* *<mark style="color:purple;">buttonColor</mark>* - выбор цвета кнопки. При варианте отображения стандартном или outlined цвет будет у шрифта, иконки и обводки. При активации свойства *<mark style="color:purple;">filled</mark>* заголовок и иконка всегда будет белыми, а фон заливки кнопки выбранным цветом
* *<mark style="color:purple;">size</mark>* - выбор готового размера кнопки
* *<mark style="color:purple;">disabled</mark>* - выбор недоступного состояния. В данном варианте не отображаются выбранные цвета и стили кнопки (**outlined**, **filled**)
* *<mark style="color:purple;">icon</mark>* - параметр, отвечающий за отображение иконки
* *<mark style="color:purple;">actions</mark>* - настройки дочерних элементов кнопки:
  * *<mark style="color:purple;">popup</mark>* - отображать список элементов в виде popup, по умолчанию отображается в стандартном **dropdown** виде
  * *<mark style="color:purple;">directionPopup</mark>* - расположение **popup** элемента сверху, по умолчанию - снизу. В случае, если окно не помещается согласно выбранному расположению, оно будет выведено в место, достаточное для его отображения без выхода за пределы экрана.
  * *<mark style="color:purple;">direction</mark>* - настройка отображения **dropdown** листа. Не работает если выбран вид отображения в виде popup
  * *<mark style="color:purple;">items</mark>* - список дочерних элементов. Настройки элементов идентичны обычной кнопке

**События:**

* *<mark style="background-color:purple;">onClick</mark>* - событие срабатывает при нажатии на кнопку.

{% hint style="info" %}
При использовании кнопки в качестве дочернего элемента некоторых компонентов, при выполнении события *<mark style="background-color:purple;">onClick</mark>* в поле *<mark style="color:purple;">value</mark>* данных, отправляемых событием на сервер, может быть принудительно назначен идентификатор. Например, для кнопок внутри строки таблицы - полю *<mark style="color:purple;">value</mark>* будет присвоен **id** строки таблицы.
{% endhint %}

[^1]: