---
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/en/llms.txt
# Adding buttons to the map
Open in CodeSandbox
The control.Button class lets you create buttons and add them to the map via control.Manager.
A button may have 3 different appearances, depending on the map size and the number of other controls on the map.
On a small map, the button displays only the icon; on a medium-size map, the text of the button is shown;
on a large map, the button icon is displayed with the text. You can lock the button in any size or you can specify only the icon
or text only.
By default, maximum button width is 90 pixels. If your button contains a long text,
you should set it to the desired maximum size using the maxWidth option.
{% list tabs %}
- index.html
```html
Examples. Adding buttons to the map
```
- 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("Button");
map.controls.add(firstButton, { float: "right" });
var secondButton = new ymaps.control.Button({
data: {
// Setting the text and icon for a button.
content: "Adaptive button",
// The icon is 16x16 pixels.
image: "error.svg",
},
options: {
/**
* Because the button changes depending on the size of the map, we will give it
* three different maxWidth values in the array.
*/
maxWidth: [28, 150, 178],
},
});
map.controls.add(secondButton);
/**
* We will artificially switch the size of the button every second,
* in order to show all the options for the button appearance.
* When resizing the map, these changes will occur automatically.
*/
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 %}