Reflex Logo
Docs Logo
Library

/

Layout

/

Separator

Visually or semantically separates content.

Section 1
Section 2

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.

Section 1
Section 2

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

Section 1
Section 2

API Reference

rx.separator

Visually or semantically separates content.

PropType | ValuesDefaultInteractive
size
"1" | "2" | ...
-
color_scheme
"tomato" | "red" | ...
-
orientation
"horizontal" | "vertical"
-
decorative
bool
-

Built with Reflex