> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.separator
Separator: |
  lambda **props: rx.separator(**props)
---

```python exec
import reflex as rx
```

# Separator

Visually or semantically separates content.

## Basic Example

```python demo
rx.flex(
    rx.card("Section 1"),
    rx.divider(),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
    align="center",
)
```

## Size

The `size` prop controls how long the separator is. Using `size="4"` will make
the separator fill the parent container. Setting CSS `width` or `height` prop to `"100%"`
can also achieve this effect, but `size` works the same regardless of the orientation.

```python demo
rx.flex(
    rx.card("Section 1"),
    rx.divider(size="4"),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
)
```

## Orientation

Setting the orientation prop to `vertical` will make the separator appear vertically.

```python demo
rx.flex(
    rx.card("Section 1"),
    rx.divider(orientation="vertical", size="4"),
    rx.card("Section 2"),
    spacing="4",
    width="100%",
    height="10vh",
)
```

## API Reference

### rx.separator

Visually or semantically separates content.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | Literal["1", "2", "3", "4"], Breakpoints[str, Literal["1", "2", "3", "4"]] | - | The size of the separator: "1", "2", "3", "4". |
| `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | The color of the separator. |
| `orientation` | Literal["horizontal", "vertical"], Breakpoints[str, Literal["horizontal", "vertical"]] | - | The orientation of the separator. |
| `decorative` | bool | - | When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/