--- metadata: - name: generator content: Diplodoc Platform v5.64.2 alternate: - https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md - https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md - href: https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md type: text/markdown title: Markdown version - href: https://yandex.ru/dev/jsapi-v2-1/doc/en/llms.txt?revision=r21950234 rel: describedby --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v2-1/doc/en/llms.txt?revision=r21950234 # control.Button Extends [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md), [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md). The "Button" control. The standard button layout changes its appearance depending on the size of the map. If the map is wide enough, the "image + text" version of the button is shown. If the map is medium in size, the "text" version of the button is shown. If the map is small, only the icon is shown in the button layout. If a button has no icon, then only text will be displayed in all states, and vice versa. [Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary) ## Constructor {#constructor-summary} ```javascript control.Button([parameters]) ``` **Parameters:** #| || **Parameter** | **Default value** | **Description** || || [`parameters`](#param-parameters) | — | Type: Object\|String Parameters of a button or string - button contents in HTML format. || || [`parameters.data`](#param-parameters.data) | — | Type: Object Button data. || || [`parameters.data.content`](#param-parameters.data.content) | — | Type: String Button contents in HTML format. || || [`parameters.data.image`](#param-parameters.data.image) | — | Type: String URL of the button icon. The standard layout of a button is designed for the icon size 16x16 pixels. || || [`parameters.data.title`](#param-parameters.data.title) | — | Type: String Text of the popup hint that appears when the mouse cursor hovers over the button. || || [`parameters.options`](#param-parameters.options) | — | Type: Object Button options. || || [`parameters.options.adjustMapMargin`](#param-parameters.options.adjustMapMargin) | false | Type: Boolean Whether the button registers its size in the map margins manager [map.margin.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/map.margin.Manager.md). || || [`parameters.options.float`](#param-parameters.options.float) | "right" | Type: String The side to which you want to align the control. Can take three values: "left", "right" or "none". If set to "left" or "right", the controls are arranged one by one, starting from the left or right edge of the map, respectively. If set to "none", the controls are positioned according to the values of the left, right, bottom and top options, relative to the boundaries of the map. See also the description of the position option. || || [`parameters.options.floatIndex`](#param-parameters.options.floatIndex) | 0 | Type: Number The priority of the control positioning. The element with highest priority is positioned closer to the map boundary that is specified in the float property. Does not work with float = "none". || || [`parameters.options.layout`](#param-parameters.options.layout) | — | Type: [ISelectableControlLayout](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControlLayout.md)\|String Constructor of the control layout which implements the [ISelectableControlLayout](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControlLayout.md) interface or the layout key in the [layout.storage](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.storage.md). The layout constructor is passed an object containing the fields: - control - Reference to the control. - options - Control options manager control.Button.options. - data - Control data manager [control.Button.data](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#data). - state - Control state manager [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#state). The layout's outward appearance changes based on the control's data, state and options. The control, in turn, reacts to layout interface events and changes the values of fields for [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#state) depending on the commands received. || || [`parameters.options.maxWidth`](#param-parameters.options.maxWidth) | 90 | Type: Number\|Number[] The maximum width of the button in different states. If a number is specified, it is assumed that the button has the same maximum dimensions in all states. If an array is specified, it will be interpreted as the maximum width of the button in different states, from the lesser to the greater. The number of states is set in the instance of the class [control.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Manager.md), which is usually a field of [Map.controls](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map.md#controls), via the "states" option. By default, the controls have three states ['small', 'medium', 'large']. || || [`parameters.options.position`](#param-parameters.options.position) | — | Type: Object Object describing the position of a control. If the position option is set, the float option value is automatically treated as "none". || || [`parameters.options.position.bottom`](#param-parameters.options.position.bottom) | 'auto' | Type: Number\|String Position relative to the bottom edge of the map. || || [`parameters.options.position.left`](#param-parameters.options.position.left) | 'auto' | Type: Number\|String Position relative to the left edge of the map. || || [`parameters.options.position.right`](#param-parameters.options.position.right) | 'auto' | Type: Number\|String Position relative to the right edge of the map. || || [`parameters.options.position.top`](#param-parameters.options.position.top) | 'auto' | Type: Number\|String Position relative to the top edge of the map. || || [`parameters.options.selectOnClick`](#param-parameters.options.selectOnClick) | true | Type: Boolean Options describing button behavior. - If true, the button becomes "pressed" after the click and changes its appearance and the value of the [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#state) field is changed to "selected". - false - The button's appearance and state does not change after clicking it. || || [`parameters.options.size`](#param-parameters.options.size) | 'auto' | Type: String Defines the appearance of the standard button layout. Takes the following values: - 'auto' - The default button layout is changed automatically depending on the dimensions of the map and the number of added controls. - 'small' - The button layout displays the icon, regardless of the map size. - 'medium' - The button layout displays only text, regardless of the map size. - 'large' - The button layout always displays both the icon and text, regardless of the map size. || || [`parameters.options.visible`](#param-parameters.options.visible) | true | Type: Boolean Indicates if the control is displayed. || || [`parameters.state`](#param-parameters.state) | — | Type: Object Object describing the state of the button. || || [`parameters.state.enabled`](#param-parameters.state.enabled) | true | Type: Boolean Indicates if the button is active. || || [`parameters.state.selected`](#param-parameters.state.selected) | false | Type: Boolean Indicates if the button is pressed. || |# **Examples:** **1.** ```javascript // Example 1. // Creating a button and adding it to the map. var button = new ymaps.control.Button({ data: { // Setting an icon for the button. image: 'images/button.jpg', // Text on the icon. content: 'Save', // Text for the popup hint. title: 'Click to save the route' }, options: { // Setting up the button options. selectOnClick: false, // The button will have three states - icon, text, and icon + text. // So we'll define three values for the button width for all states. maxWidth: [30, 100, 150] } }); map.controls.add(button, { float: 'right', floatIndex: 100 }); ``` **2.** ```javascript // Example 2. // Creating buttons with a custom layout. var button = new ymaps.control.Button({ data: { content: 'Red button', title: 'Press the button' }, options: { layout: ymaps.templateLayoutFactory.createClass( // If the button is not pressed, the 'myButton' CSS style is applied. // If the button is pressed, the 'myButton' and 'myButtonSelected' CSS styles are applied. "
" + "{{ data.content }}" + "
" ), // In order to correctly position all other controls horizontally, // you should specify the maximum width of the layout. maxWidth: 150 } }); map.controls.add(button, { float: 'left', floatIndex: 0 }); // You can define the positioning relative to the edges of the map. In this case, // the value of the maxWidth option does not affect // the positioning of controls. map.controls.add(button, { float: 'none', position: {left: '5px', top: '5px'} }); ``` ## Fields {#properties-summary} #| || **Name** | **Type** | **Description** || || [data](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#data) | [data.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/data.Manager.md)| Button data. Names of fields that are available via the data.Manager.get method: - image - Button icon, if available. - content - Button content in HTML format. - title - Text of the popup hint that appears when the mouse cursor hovers over the button. || || [events](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md)| Event manager. Inherited from [IEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events). || || [options](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options) | [IOptionManager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOptionManager.md)| Options manager. Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options). || || [press](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#press) | | The event indicating that the button has been pressed. Unlike the click event, it is generated only if the state isEnabled == true. Instance of the Event class. || || [state](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#state) | [data.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/data.Manager.md)| Button state. Names of fields that are available via the data.Manager.get method: - selected - Indicates whether the button is selected. - enabled - Indicates whether the button is active. - size - The size that is currently set for the button. || |# ## Events {#events-summary} #| || **Name** | **Description** || || [click](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#event-click)| Clicking the button. Instance of the [Event](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. || || [deselect](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-deselect)| The control is not selected. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-deselect). || || [disable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-disable)| The control is unavailable. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-disable). || || [enable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-enable)| The control is available. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-enable). || || [optionschange](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange)| Change to the object options. Inherited from [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange). || || [parentchange](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange)| The parent object reference changed. Data fields: - oldParent - Old parent. - newParent - New parent. Inherited from [IChild](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange). || || [select](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-select)| The control is selected. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#event-select). || |# ## Methods {#methods-summary} #| || **Name** | **Returns** | **Description** || || [deselect](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#deselect)() | | Cancels selection of the control (turns it off). Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#deselect). || || [disable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#disable)() | | Makes the control unavailable (user actions are not allowed). Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#disable). || || [enable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#enable)() | | Makes the control available (user actions are allowed). Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#enable). || || [getMap](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md#getMap)() | [Map](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map.md) | Returns reference to the map. || || [getParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControlParent.md)\|null | Returns link to the parent object, or null if the parent element was not set. Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent). || || [isEnabled](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#isEnabled)() | Boolean | Returns true if the control is available, or false if it is unavailable. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#isEnabled). || || [isSelected](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#isSelected)() | Boolean | Returns true if the control is selected, or false if it is not selected. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#isSelected). || || [select](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#select)() | | Selects (turns on) the control. Inherited from [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISelectableControl.md#select). || || [setParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChildOnMap.md) | Sets the parent object. If the null value is passed, the manager element will only be deleted from the current parent object. Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent). || |# ## Fields details {#field_detail} ### data {#data} ```javascript {data.Manager} data ``` Button data. Names of fields that are available via the data.Manager.get method: - image - Button icon, if available. - content - Button content in HTML format. - title - Text of the popup hint that appears when the mouse cursor hovers over the button. ### press {#press} ```javascript press ``` The event indicating that the button has been pressed. Unlike the click event, it is generated only if the state isEnabled == true. Instance of the Event class. ### state {#state} ```javascript {data.Manager} state ``` Button state. Names of fields that are available via the data.Manager.get method: - selected - Indicates whether the button is selected. - enabled - Indicates whether the button is active. - size - The size that is currently set for the button. **Example:** ```javascript var button = new ymaps.control.Button('Edit'); // Setting the button state to "selected" - // similar to calling button.select(); button.state.set('selected', true); ``` ## Events details {#event_detail} ### click {#click} Clicking the button. Instance of the [Event](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. ## Methods details {#method_detail} ### getMap {#getMap} ```javascript {Map} getMap() ``` **Returns** reference to the map. [*star]: Mandatory parameter/option.