---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md
---
# control.Button

Расширяет [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md), [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md).

Элемент управления "Кнопка". Добавляется в тулбар.

## Конструктор {#constructor}

```javascript
control.Button([params[, options]])
```

**Параметры:**

#|
|| **Параметр** | **Значение по умолчанию** | **Описание** ||
|| `params` | — | Тип: Object\|String

Параметры кнопки или строка - содержимое кнопки в виде HTML. ||
|| `params.data` | — | Тип: Object

Данные кнопки. ||
|| `params.data.content` | — | Тип: String

Содержимое кнопки в виде HTML. ||
|| `params.data.image` | — | Тип: String

Иконка кнопки, если есть. ||
|| `params.data.imageDisabled` | — | Тип: String

Иконка для "отключенного" состояния кнопки. ||
|| `params.data.imageSelected` | — | Тип: String

Иконка для "выбранного" состояния кнопки. ||
|| `params.data.title` | — | Тип: String

Текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. ||
|| `options` | — | Тип: Object

Опции кнопки. ||
|| `options.layout` | — | Тип: Function\|String

Макет элемента управления. В конструктор макета передается объект, содержащий поля:
• control - ссылка на элемент управления;

• options - менеджер опций элемента управления control.Button.options;

• data - менеджер данных элемента управления [control.Button.data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#data);

• state - менеджер состояния элемента управления [control.Button.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#state).

Макет меняет свой внешний вид на основе данных, состояния и опций элемента управления. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей [control.Button.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#state) в зависимости от полученных команд. (Тип: конструктор объекта с интерфейсом [ISelectableControlLayout](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControlLayout.md) или ключ макета). ||
|| `options.minWidth` | 0 | Тип: Number

Минимальная ширина кнопки. ||
|| `options.position` | \{ top: 5, left: 5 \}  | Положение элемента управления над картой. Задается в виде объекта со следующими полями: 
• top - отступ от верхнего края контейнера карты в пикселах;

• right - отступ от правого края контейнера карты в пикселах;

• bottom - отступ от нижнего края контейнера карты в пикселах;

• left - отступ от левого края контейнера карты в пикселах.

Если при этом заданы одновременно и top, и bottom, то значение bottom игнорируется. Аналогично, если заданы одновременно и left, и right, то значение right игнорируется. Если элемент управления добавляется в группу элементов (например, в тулбар или раскрывающийся список), то значение position не применяется. ||
|| `options.selectOnClick` | true | Тип: Boolean

Опция, описывающая поведение кнопки. 
• true - кнопка становится "нажатой" после клика;

• false - кнопка не меняет свой внешний вид после клика на нее. ||
|| `options.visible` | true | Тип: Boolean

Признак того, что элемент управления отображается. ||
|#

**Примеры:**

**1.**

```javascript
// Пример 1.
// Создание кнопки и добавление ее на карту.
var button = new ymaps.control.Button({
         data: {
             // Зададим иконку для кнопки
             image: 'images/button.jpg',
             // Текст на кнопке.
             content: 'Сохранить',
             // Текст всплывающей подсказки.
             title: 'Нажмите для сохранения маршрута'
         }
    }, {
        // Зададим опции для кнопки.
        selectOnClick: false
    });
map.controls.add(button, {top: 5, right: 5});
```

**2.**

```javascript
// Пример 2.
// Создание кнопки с пользовательским макетом
var button = new ymaps.control.Button({
        data: {
            content: 'Красная кнопка',
            title: 'Нажмите на кнопку'
        }
    }, {
        layout: ymaps.templateLayoutFactory.createClass(
            // Если кнопка не нажата, к ней применится css-стиль 'myButton'
            // Если кнопка нажата, к ней применятся css-стили 'myButton' и 'myButtonSelected'.
            "<div class='myButton [if state.selected]myButtonSelected[endif]' title='$[data.title]'>" +
            "$[data.content]" +
            "</div>"
        )
    });
map.controls.add(button);
```
## Поля {#fields}

#|
|| **Имя** | **Тип** | **Описание** ||
|| [data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#data) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Данные кнопки. Имена полей, доступных через метод data.Manager.get: 
• image - иконка кнопки, если есть;

• imageDisabled - иконка для "отключенного" состояния кнопки;

• imageSelected - для "выбранного" состояния кнопки;

• content - cодержимое кнопки в виде HTML;

- title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. ||
|| [events](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventManager.md) | Менеджер событий.

Унаследовано от [IEventEmitter](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events). ||
|| [options](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options) | [IOptionManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IOptionManager.md) | Менеджер опций.

Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options). ||
|| [state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#state) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Состояние кнопки. Имена полей, доступных через метод data.Manager.get: 
• selected - признак, нажата ли кнопка;

• enabled - признак, активна ли кнопка;

• pressed - признак того, что кнопка зажата пользователем. ||
|#

## События {#events}

#|
|| **Имя** | **Описание** ||
|| [click](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#event-click) | Нажатие на кнопку. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ||
|| [deselect](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-deselect) | Элемент управления не выбран.

Унаследовано от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-deselect). ||
|| [disable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-disable) | Элемент управления стал недоступным.

Унаследовано от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-disable). ||
|| [enable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-enable) | Элемент управления стал доступным.

Унаследовано от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-enable). ||
|| [mapchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md#event-mapchange) | Сменилась карта. Поля данных: 
• oldMap - старая карта;

• newMap - новая карта.

Унаследовано от [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md#event-mapchange). ||
|| [optionschange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#event-optionschange) | Изменение в опциях объекта.

Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#event-optionschange). ||
|| [parentchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#event-parentchange) | Сменился родительский объект.

Поля данных:

• oldParent - старый родитель;

• newParent - новый родитель.

Унаследовано от [IChild](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#event-parentchange). ||
|| [select](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-select) | Элемент управления выбран.

Унаследовано от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-select). ||
|#

## Методы {#method}

#|
|| **Имя** | **Возвращает** | **Описание** ||
|| [deselect](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#deselect)() |  | Отменяет выбор элемента управления (выключает).

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#deselect). ||
|| [disable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#disable)() |  | Делает элемент управления недоступным (запрещены пользовательские действия).

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#disable). ||
|| [enable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#enable)() |  | Делает элемент управления доступным (разрешены пользовательские действия).

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#enable). ||
|| [getParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md) | Returns ссылку на родительский объект.

Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent). ||
|| [isEnabled](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#isEnabled)() | Boolean | Returns true - элемент управления доступен, false - недоступен.

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#isEnabled). ||
|| [isSelected](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#isSelected)() | Boolean | Returns true - элемент управления выбран, false - не выбран.

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#isSelected). ||
|| [select](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#select)() |  | Выбирает (включает) элемент управления.

Унаследован от [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#select). ||
|| [setParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md) | Устанавливает родительский объект.

Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent). ||
|#

## Описание полей {#description-fields}

### data

```javascript
{data.Manager} data
```

Данные кнопки. Имена полей, доступных через метод data.Manager.get:

• image - иконка кнопки, если есть;

• imageDisabled - иконка для "отключенного" состояния кнопки;

• imageSelected - для "выбранного" состояния кнопки;

• content - cодержимое кнопки в виде HTML;

• title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши.

### state

```javascript
{data.Manager} state
```

Состояние кнопки. Имена полей, доступных через метод data.Manager.get:

• selected - признак, нажата ли кнопка;

• enabled - признак, активна ли кнопка;

• pressed - признак того, что кнопка зажата пользователем.

**Пример:**

```javascript
var button = new ymaps.control.Button('Редактировать');
// Зададим состояние кнопки "нажата" -
// аналогично вызову метода button.select();
button.state.set('selected', true);
```
## Описание событий {#description-events}

### click

Нажатие на кнопку. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md).