ToolJet/docs/versioned_docs/version-2.50.0-LTS/widgets/divider.md

---
id: divider
title: Divider
---

The **Divider** component is used to add a separator between components.

<div style={{paddingTop:'24px'}}>

## Component Specific Actions (CSA)

There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.

</div>

<div style={{paddingTop:'24px'}}>

## Exposed variables

There are currently no exposed variables for the component.

</div>

<div style={{paddingTop:'24px'}}>

## General

### Tooltip

A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.

Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.

</div>

<div style={{paddingTop:'24px'}}>

## Layout

| Layout | Description | Expected Value  |
| :-------------- | :-----------------| :------------------ |
| Show on Desktop  | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Show on Mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |

</div>

---

<div style={{paddingTop:'24px'}}>

## Styles

| Property   | Description  | Configuration Options  |
|:---------- |:------------ |:-----------------------|
| Divider Color   | Sets the color of the divider.  | Select the color or click on **fx** and input code that programmatically returns a HEX color code. |
| Visibility  | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Box Shadow   | Sets the box shadow properties of the component.  | Select the box shadow color and adjust related properties or set it programmatically using **fx**. |

</div>