---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/button_layout.md
- https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/button_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v2-1/doc/ru/llms.txt
# Произвольный макет кнопки
Open in CodeSandbox
Макеты
объектов можно создавать с помощью фабрики templateLayoutFactory,
используя текстовые шаблоны.
В данном примере создается пользовательский макет кнопки.
Макет элемента управления строится на основе его данных, состояния и опций.
Макет автоматически перестраивается при изменении значений полей,
состояния или опций, которые используются в его текстовом шаблоне.
{% list tabs %}
- index.html
```html
Произвольный макет кнопки
```
- button_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.650625, 37.62708],
zoom: 10,
controls: [],
}),
/*
* Макет кнопки должен отображать поле data.content
* и изменяться в зависимости от того, нажата ли кнопка или нет.
* Текущий размер (small, medium, large) рассчитывается исходя из значения опции maxWidth
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.Button.xml#param-parameters
*/
ButtonLayout = ymaps.templateLayoutFactory.createClass(
[
'",
].join("")
),
button = new ymaps.control.Button({
data: {
content: "Жмак-жмак-жмак",
image: "pen.svg",
title: "Жмак-жмак-жмак",
},
options: {
layout: ButtonLayout,
maxWidth: [170, 190, 220],
},
});
myMap.controls.add(button, {
position: {
right: 5,
top: 5,
},
});
}
```
{% endlist %}