> 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/dynamic-components/components/separator.md).

# Separator

The Avonni Separator component helps you visually divide sections of your user interface, improving organization and readability. It's like drawing a clear line between different parts of your content, optionally accompanied by a label and an icon.

## Overview

The Separator is primarily a visual element. Use it to break a page into clearly delineated sections — for example, a separator with the label "Customer Information" makes that section stand out from the rest of the page. You can control its orientation, the alignment of its content, and enhance it with an icon.

## Configuration

To configure the Separator, select it on the canvas. The **Edit Separator** panel opens on the right with the configuration tabs. The sections below mirror the Properties tab from top to bottom.

### Content

#### Label

**Give your separator a descriptive label.** This is the text to display in the separator. It's useful for providing context or headings for different sections of your page. For example, you might use a separator with the label "Customer Information" to clearly distinguish that section from other parts of the page.

#### Orientation

Set the orientation of the component. Choose between **Horizontal** (default) and **Vertical**.

#### Align Content

**Control the position of the content in the separator.** You can align the separator and its label to the:

* **Start:** Left-aligned (for left-to-right languages).
* **Center:** Centered on the page (default).
* **End:** Right-aligned (for left-to-right languages).

### Icon

Enhance the separator with a visual cue. Choose an icon that complements the separator's purpose or the content it divides.

#### Icon Name

The Lightning Design System name of the icon to display.

#### Icon Size

The size of the icon. Choose from **Xxs**, **Xs**, **Small** (default), **Medium**, or **Large**. Available once an Icon Name is set.

#### Icon Source

A URL to a custom image to use instead of a standard icon (`.apng`, `.avif`, `.gif`, `.jpg`, `.jpeg`, `.png`, `.svg`, `.webp`).

#### Icon Variant

The shape of the icon. Choose between **Circle** and **Square** (default).

#### Icon Position

Describes the position of the icon — to the **Left** (default) or **Right** of the label. Available once an Icon Name is set.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).


---

# 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/dynamic-components/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.