> 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 ![](/files/6kZ2Bz2fqYWSvHbxTEBi) 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="/files/sZ6q2Y9hhYIxPsxWSWyP" 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 ![](/files/kdPBJ2kueuyDq1EENda3)

<figure><img src="/files/0YZIREzqbOA76TrQP0lr" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.datasuite.vn/english/features/other-components/add-button.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.