> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-3/charts-gallery/other-charts/button-component.md).

# Button component

Button components can be used in the charting applications to enable users to interact with the charts and customize the chart display.

{% hint style="info" %}
Check out the given walk-through on how to use the Button component inside the Designer module.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/yQmkSbHxEM4VlTpUobV4/Button%20component.gif" alt=""><figcaption><p>Using the Button component in a Dashboard</p></figcaption></figure>

## Best Situation to use Button component

Buttons can be used to perform the following actions:

* Toggle different chart types
* Zoom in and out
* Apply filters to the data being displayed

## Default Component Image

## Properties of the Button Component

### **General**

User can change the height, width, top, left. If initial visibility is unchecked, then the component won’t be visible at the first preview. User can manage the label text & click value to drill.

!\[General Properties for Button component

]\(/files/sfS1oMyGtCEvDUhvqk2j)

### **Background**&#x20;

User can enable Shadow, Shadow Color, and Shadow Transparency by using the Background properties.

* **Shadow – Enable shadow.**
* **Shadow Colour – Set the shadow colour.**
* **Shadow Transparency – Set the opacity.**

&#x20;      ![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/8JlhVodjpuEo0fMkN8HW/image.png)

### **Style**&#x20;

User can set the Button category as primary, secondary etc. & background color and font color as well as font styling properties in this section. Also use can customize the font colour, background color & Hover color.

* **Font size –** Set the font size.
* **Button Radius –** Set the border radius.
* **Font Style –** Select the font style.
* **Font Weight –** Select the font weight.
* **Font family –** Select the font family.

&#x20;    ![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/lxlEbm1Z9fJhc9gBuR0s/image.png)

* **Set Button Category -** User can set the button category as Primary ,Secondary, Success, Warning, Danger, light, Info and Dark.

&#x20;      ![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/jeET678EcURuAyP86wTI/image.png)

Based on the selected category the button component will have the default display as displayed below for the Secondary and Success Categories:

<details>

<summary>Secondary category Button</summary>

![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/da7NuYj7jANVHSEqYdTw/image.png)

</details>

<details>

<summary>Success category Button</summary>

![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/0LQ9GewQ2sAqg4sX9mTE/image.png)

</details>

* **Use Outlined Button-** Outlined Button will display the button with the outline color.

&#x20;     ![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/BFDxUKps33caEWtZNOan/image.png)

E.g., Button Category is set as Secondary in the below given image:

![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/LvOthMzHykyxSeAPVabx/image.png)

* **Use Custom Color-** User can customize the font color, Background color, and Hover color.

\
![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/GuQX4Ukvh5KGjbkNyTr2/7.png)

* **Output -** Some of the possible previews of the button components are displayed in the below given image:

![](https://content.gitbook.com/content/q31vylHQzfu10ahsh9Qq/blobs/KU4Z8MGl8Oms29Ap3a2I/8.png)