# Separator

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FzCMNQL3TA5WgE2gLatSY%2Fimage%20(40).avif?alt=media&#x26;token=2a34f1e7-719c-4d28-813e-40a4fe2a7906" alt="" width="375"><figcaption></figcaption></figure>

***

## Configuring the Separator

### Adding a label

The label field represents the text you want to display in the separator.&#x20;

### Playing with alignment

The separator content can be positioned with values that include **`start`**, **`center`** and **`end`**.

### Adding an icon

An icon can be added next to the separator label. The position can be set by changing the **`Icon Position`** property.

***

## Adding Interactions

No interactions are available.

***

## Styling the Separator

From the Styles panel, you can customize styling attributes for the Separator:&#x20;

* **`Label`**: to customize the styling settings of the label.
* **`Icon`**: to customize the styling settings of the icon.
* **`Border`**: to customize the styling settings of the border line.

You can find the instructions for styling [here](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

## Examples

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FV89yBANYlhUbjSsCVOIK%2F2022-10-27_20-53-32.png?alt=media&#x26;token=ed587988-c8c3-4912-9424-2abee3ebe026" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Label</td><td>TODAY</td></tr><tr><td>Align Content</td><td>Center</td></tr><tr><td>Icon Name</td><td>standard:service_appointment_capacity_usage</td></tr><tr><td>Icon Size</td><td>Medium</td></tr><tr><td>Icon Position</td><td>Left</td></tr><tr><td>Style / Label Color</td><td>#107cad</td></tr><tr><td>Style / Font Size</td><td>20px</td></tr><tr><td>Style / Font Weight</td><td>700 - Bold</td></tr><tr><td>Style / Icon Background Color</td><td>#2e844a</td></tr><tr><td>Style / Border Size</td><td>2px</td></tr><tr><td>Style / Border Color</td><td>#107cad</td></tr><tr><td>Style / Border Style</td><td>Solid</td></tr></tbody></table>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>alignContent</td><td>String</td><td>Position of the content in the separator. Valid values include start, center and end.</td></tr><tr><td>iconName</td><td>String</td><td>The name of the icon to be used in the format 'utility:down'.</td></tr><tr><td>iconPosition</td><td>String</td><td>Describes the position of the icon. Valid values include left and right.</td></tr><tr><td>iconSize</td><td>String</td><td>The size of the icon. Options include <code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code> and <code>large</code>.</td></tr><tr><td>label</td><td>String</td><td>Text to display in the separator.</td></tr></tbody></table>

### Events

No events are available.

### Styling Hooks

#### Label

| Name        | Description                             |
| ----------- | --------------------------------------- |
| Text Color  | Define a text color for the label text  |
| Font Size   | Define a font size for the label text   |
| Font Style  | Define a font style for the label text  |
| Font Weight | Define a font weight for the label text |

#### Icon

| Name                     | Description                                    |
| ------------------------ | ---------------------------------------------- |
| Background Color         | Define a background color for the icon         |
| Foreground Color         | Define a foreground color for the icon         |
| Foreground Color Default | Define a foreground color default for the icon |
| Border Radius            | Define a border radius size for the icon       |

#### Border

| Name         | Description                          |
| ------------ | ------------------------------------ |
| Border Color | Define a border color for the border |
| Border Size  | Define a border size for the border  |
| Border Style | Define a border style for the border |