# Separator

<figure><img src="/files/Yyxyq2N2udfK49VshbDy" 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](/flow/component-builder/style-panel.md).

## Examples

<figure><img src="/files/DeU3k7WJ0614elmCV0fM" 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 |


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/flow/flow-components/separator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.