---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/button.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/button.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Добавление кнопки на карту
Open in CodeSandbox
Класс control.Button позволяет создавать кнопки и добавлять их на карту через control.Manager.
Кнопка может принимать 3 вида в зависимости от размера карты и количества других элементов управления на карте.
На карте маленького размера в кнопке показываться только иконка, на средней карте показывается только текст, на карте
большого размера показывается иконка с текстом. Вы можете зафиксировать кнопку в любом размере или задать только иконку
или только текст.
У кнопки по умолчанию выставлена максимальная ширина в 90 пикселей. Если ваша кнопка содержит длинный текст,
следует задать ей нужный максимальный размер через опцию maxWidth.
{% list tabs %}
- index.html
```html
Добавление кнопки на карту
```
- button.js
```js
ymaps.ready(init);
function init() {
var map = new ymaps.Map("map", {
center: [59.93772, 30.313622],
zoom: 10,
controls: [],
}),
firstButton = new ymaps.control.Button("Кнопка");
map.controls.add(firstButton, { float: "right" });
var secondButton = new ymaps.control.Button({
data: {
// Зададим текст и иконку для кнопки.
content: "Адаптивная кнопка",
// Иконка имеет размер 16х16 пикселей.
image: "error.svg",
},
options: {
// Поскольку кнопка будет менять вид в зависимости от размера карты,
// зададим ей три разных значения maxWidth в массиве.
maxWidth: [28, 150, 178],
},
});
map.controls.add(secondButton);
// Будем искусственно переключать размеры кнопки каждую секунду, чтобы показать все варианты
// внешнего вида кнопки.
// При изменении размера карты эти перестроения будут происходить автоматически.
function changeSize() {
var oldSize = secondButton.options.get("size"),
newSize;
switch (oldSize) {
case "small":
newSize = "medium";
break;
case "medium":
newSize = "large";
break;
case "large":
newSize = "small";
break;
default:
newSize = "small";
}
secondButton.options.set("size", newSize);
}
window.setInterval(changeSize, 1000);
}
```
{% endlist %}