> For the complete documentation index, see [llms.txt](https://docs.datasuite.vn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.datasuite.vn/english/features/other-components/add-button.md).

# Add Button

{% stepper %}
{% step %}

#### Insert a Button

On the toolbar above, click the ![](https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FXqyg6R0dGpLXkabY7MVG%2Fimage.png?alt=media\&token=4f0f4b98-24a1-4dd8-829c-527e82848232) button to add a button to the Report Page.
{% endstep %}

{% step %}

#### Adjust Size and Position

Once the button is added to the Report Page, users can:

* **Drag and drop** to adjust its position on the page.
* **Drag the bottom-right corner** to resize the button.
  {% endstep %}

{% step %}

#### Edit and Format Buttons

In the **right sidebar**, under the **Visualizations → Style** tab, users can configure the following properties:

* **Border**: Enable or disable the border of the button container.
* **Label**: Text displayed on the button.
* **Tooltip**: Hint text shown when the user hovers over the button.
* **Action**: Define what happens when the user clicks the button. Two types of actions are supported:
  * **Web URL**: Opens a specified link with two display modes:
    * **Same tab**: Opens the link in the current browser tab.
    * **New tab**: Opens the link in a new browser tab.
  * **Bookmark**: Navigates to a predefined report bookmark.
* **Format**: Customize the appearance of the button.

<figure><img src="https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FPmdmlft36fqaBquSwe2P%2Fimage.png?alt=media&amp;token=09a8d6b5-6380-4af8-9fc2-29939326bfbd" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

#### Button Format Details

Users can define separate styles for each button state:

* **Default**: Normal state when the Report Page is first loaded.
* **Hover**: When the mouse hovers over the button.
* **Press**: When the button is being clicked.

For each state, the following style properties can be customized:

<table><thead><tr><th width="135">Property</th><th>Description</th><th>Default Value</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td>Button width (in px)</td><td>80px</td></tr><tr><td><strong>Height</strong></td><td>Button height (in px)</td><td>36px</td></tr><tr><td><strong>Font</strong></td><td>Font family used</td><td>Inter</td></tr><tr><td><strong>Font Size</strong></td><td>Font size (in px)</td><td>14px</td></tr><tr><td><strong>Font Style</strong></td><td>Normal or Italic</td><td>Normal</td></tr><tr><td><strong>Font Weight</strong></td><td>Normal or Bold</td><td>Normal</td></tr><tr><td><strong>Font Color</strong></td><td>Text color</td><td>White <code>#FFFFFF</code></td></tr><tr><td><strong>Background</strong></td><td>Button background color</td><td>Blue <code>#154DBD</code></td></tr><tr><td><strong>Border Width</strong></td><td>Border thickness (in px)</td><td>0px</td></tr><tr><td><strong>Border Radius</strong></td><td>Rounded corners (in px)</td><td>6px</td></tr><tr><td><strong>Border Style</strong></td><td>Solid, Dashed, or Dotted</td><td>Solid</td></tr><tr><td><strong>Border Color</strong></td><td>Border color</td><td>Blue <code>#154DBD</code></td></tr></tbody></table>

**For example**, a user can configure the button with the values above to create a button styled as shown in the preview below ![](https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FuyoVgoVj6RhxLIC6XNrG%2Fimage.png?alt=media\&token=f5d1d248-0902-4855-9e60-d60a74e12686)

<figure><img src="https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2F44G46UIo17vIJdZz7lky%2Fimage.png?alt=media&amp;token=fc93f730-e0c4-465d-9ede-43f2e6b8db33" alt=""><figcaption></figcaption></figure>