Button
======

``Button`` component creates a button element in the sidebar content. It will emit click event that user can subscribe to using ``INKAPI.addEvent``.

Example
+++++++

.. code-block:: javascript
    :linenos:

    import INKAPI from './inkapi.js'

    INKAPI.ready(async () => {

      const UI = INKAPI.ui;

      const sidebarObj = await UI.create({
        type: "Sidebar",
        sidebarTitle: "Personal Sidebar",
        icon: "./sample.svg",
        children: [
          {
            type: "Button",
            id: "myBtn",
            text: "Publish",
            styles: {
              "border-radius": "5px",
            }
          },
        ],
      });

      console.log(sidebarObj);

    });

Options
+++++++

+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Name                  | Type                                   | Description                                                                                                                                                                                                                                                                                         |
+=======================+========================================+=====================================================================================================================================================================================================================================================================================================+
| id?                   | ``String | Number``                    | You can assign a unique id to the component. It will be helpful for listening to events and removing component in future. If ``id`` is not given by user (or if given ``id`` is already associated with a UI component) then an automatically generated id is assigned to the component.            |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| type                  | ``Button``                             | This field should be passed ``Button`` as value to create a Button component. This value is case-sensitive.                                                                                                                                                                                         |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| text                  | ``String``                             | Text content of the button element.                                                                                                                                                                                                                                                                 |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| image?                | ``String``                             | You can pass your image source url (relative to the assets folder in your plugin src directory) here. This will make button act like clickable image.                                                                                                                                               |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| rightIcon?            | ``Object``                             | You can pass your icon image source url here, to be placed on the right side of button.                                                                                                                                                                                                             |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| tooltip?              | ``String``                             | The string passed in this param will be displayed as a tooltip for the button element.                                                                                                                                                                                                              |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| leftIcon?             | ``String``                             | You can pass your icon image source url here, to be placed on the left side of button.                                                                                                                                                                                                              |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| styles?               | ``Object``                             | Custom styles for the root element.                                                                                                                                                                                                                                                                 |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| textStyles?           | ``Object``                             | Custom styles for the inner text element.                                                                                                                                                                                                                                                           |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| rightIconStyles?      | ``Object``                             | Custom styles for the right icon element.                                                                                                                                                                                                                                                           |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| leftIconStyles?       | ``Object``                             | Custom styles for the left icon element.                                                                                                                                                                                                                                                            |
+-----------------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

Shadow Methods
++++++++++++++

+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| Methods        | Arguments                   | Description                                                                                                                     |
+================+=============================+=================================================================================================================================+
| changeText     | text: ``String``            | Using this function plugin can change the text label of the button.                                                             |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| setStyles      | styles: ``Object``          | This function is use to apply styles to the root of the element.                                                                |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+

Events
++++++

+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+
| Event Keyword         | Description                                                                                                                     |
+=======================+=================================================================================================================================+
| click                 | This event is triggered when the button is clicked.                                                                             |
+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+
| mouseenter            | This event is triggered when the mouse cursor enters the button element.                                                        |
+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+
| mouseleave            | This event is triggered when the mouse cursor leaves the button element.                                                        |
+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+

.. note::
  To learn more about shadow methods and shadow objects, please refer `here <./custom-ui-intro.html#shadow-ui-objects>`_.