# Tab Component
Tab component has an option to create multiple buttons that can be associated to the group for displaying the show & hide visibility for the group components.
{% hint style="success" %}
Check out the given demonstration on the Tab component.
{% endhint %}
using the Tab component in a Dashboard
## Default Component Image
## Properties of the Tab Component
### **General**
User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. User can mange the tab & associate the group. The **Tab Alignment** properties field has been provided to set Vertical or Horizontal alignment for a Tab component.
### **Manage Tabs**
* The user can add multiple tabs and change the tab names.
* The Manage Tabs provides option to show the icons as per requirement.
E.g., ***bd-diamond*** will display the normal icon.
* The user can select the default tab as displayed in the following image.
{% hint style="info" %}
*Please Note: The **Manage Tabs** option is provided inside the **General** Properties.*
{% endhint %}
### **Associate Groups**
The Associate Groups option is used to associate groups with charting components to each tab using the drop down as shown in the below given image:
{% hint style="info" %}
*Please Note: The **Associate*** ***Groups** option is provided inside the **General** Properties*.
{% endhint %}
### **Style Properties**
\
User can set the background colour and font colour as well as font styling properties in this section. Background Opacity for Tabs is added as well as spacing to provide space between tabs. Selection colour also added as used if required.
* **Font Size -** Set the font size**.**
* **Button Radius –** Set the Button radius**.**
* **Button Width -** Button width can be control.
* **Spacing –** Set the spacing between the buttons**.**
* **Background Opacity –** Set the opacity**.**
* **Font Style –** Select the font style**.**
* **Font Weight –** Select the font weight**.**
* **Font Family -** Select the font family**.**
* **Font Color –** Set the font color**.**
* **Background Color –** Set the background color**.**
* **Selection Color –** Set the selection color.
* **Border on selection** - Enable border on selection
* **Border color** - Set the border color - while click on button buttom will show the line & updated color.
* **Border width** - Set the border width
* **Content alignment** - Set the alignment as center /left/right.
## Steps to associate the group with tabs:
Before using the Tab Component, the user has to create groups with components that can be associated to the tabs later.
### **Creating Groups**
* Click on the ***Manage Dashboard Components*** option provided in the right side panel of the Dashboard canvas.
* Click the ***Add Group*** option.
* Add each component to its respective group.
* Open the ***Manage Tabs*** from the ***General*** Properties.
* The ***Manage Tabs*** window opens.
* Select a ***Tab*** from the by default selected tabs using the given check box.
* Change ***Tab names*** (if required) and **reference image/icon names** as per requirement.
* Click the ***Save*** option.
* Open the ***Associate Tabs*** from the ***General*** Properties.
* The ***Associate Groups*** window opens.
* Select a Tab from the drop-down menu.
* Associate a group for each Tab by using the checkbox.
* Click the ***Save*** option.
* Open the ***Preview*** mode for the dashboard.
* Click on the Tab, it will display the associated group of component.
