> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/separator.md).

# Separator

<figure><img src="/files/Yyxyq2N2udfK49VshbDy" alt="" width="375"><figcaption></figcaption></figure>

The Separator draws a horizontal or vertical dividing line between content sections. It can optionally display a label and an icon to provide context at the divider point. It has no interactions and no output variables.

***

## Overview

<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>

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Separator Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

| Setting           | What It Does                                                                                |
| ----------------- | ------------------------------------------------------------------------------------------- |
| **Label**         | Text displayed at the divider line. Leave blank for a plain line with no text.              |
| **Orientation**   | Direction of the divider: **Horizontal** (default) or **Vertical**.                         |
| **Align Content** | Position of the label and icon along the line: **Start**, **Center** (default), or **End**. |

### Icon

The **Icon** group adds an icon beside the label.

| Setting           | What It Does                                                                                   |
| ----------------- | ---------------------------------------------------------------------------------------------- |
| **Icon Name**     | A Lightning Design System icon name (e.g., `utility:info`).                                    |
| **Icon Size**     | Size of the icon: Xx-Small, X-Small, **Small** (default), Medium, Large, X-Large, or Xx-Large. |
| **Image Source**  | A custom image URL to use instead of a standard icon.                                          |
| **Icon Variant**  | Shape of the icon container: **Square** (default) or **Circle**.                               |
| **Icon Position** | Where the icon appears relative to the label: **Left** or **Right**.                           |

***

## Styling

The **Style** tab gives you fine-grained control over the Separator's appearance. Configure it from the **Style** tab of the Edit Separator panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the separator, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the separator.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the separator's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the separator's dimensions.

* **Width / Height:** Set fixed dimensions for the separator.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
  {% endtab %}

{% tab title="Label" %}
Styles the separator's label text.

* **Color:** Set the label color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
  {% endtab %}

{% tab title="Icon" %}
Styles the icon shown on the separator.

* **Background Color / Foreground Color:** Set the icon's background and foreground colors.
* **Icon Radius:** Control the roundness of the icon corners.
* **Color Border / Border Size / Border Style:** Customize the border around the icon.
  {% endtab %}

{% tab title="Border" %}
Customizes the separator's divider line.

* **Color:** Set the line color.
* **Size:** Adjust the line thickness.
* **Style:** Choose a line style (e.g. solid, dashed, dotted).
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.