Separator
Visually or semantically separates content.
Basic Example
Section 1
Section 2
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.
Section 1
Section 2
Orientation
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.
rx.separator(,
size="1",
color_scheme="tomato",
orientation="horizontal",
)
sizecolor_schemeorientationProps
| Prop | Type | Description |
|---|---|---|
size | "1""2""3""4" | The size of the separator: "1" | "2" | "3" | "4". |
color_scheme | "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 | "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. |