---
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_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/button_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Custom button layout
Open in CodeSandbox
Object layouts
can be created using the templateLayoutFactory factory
and text templates.
This example creates a custom layout for a button.
The layout of the control is based on its data, status, and options.
The layout is automatically adjusted when changes are made to the values
of fields, states, or options that are used in its text template.
{% list tabs %}
- index.html
```html
Examples. Custom layout for a button.
```
- button_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.650625, 37.62708],
zoom: 10,
controls: [],
}),
/**
* The button layout should display the 'data.content' field
* and change depending on whether the button was clicked or not.
* The current size (small, medium, large) is calculated from the value of the 'maxWidth' option
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/control.Button.xml#param-parameters
*/
ButtonLayout = ymaps.templateLayoutFactory.createClass(
[
'",
].join("")
),
button = new ymaps.control.Button({
data: {
content: "Click-click-click",
image: "pen.svg",
title: "Click-click-click",
},
options: {
layout: ButtonLayout,
maxWidth: [170, 190, 220],
},
});
myMap.controls.add(button, {
position: {
right: 5,
top: 5,
},
});
}
```
{% endlist %}