Basic Example

Section 1

Section 2

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.

Section 1

Section 2

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.

Section 1

Section 2

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

API Reference

Separator

Visually or semantically separates content.

Prop	Type	Description
`size`	Literal	The size of the select: "1" \| "2" \| "3" \| "4"
`color_scheme`	Literal	The color of the select
`orientation`	Literal	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

See the full list of default event triggers

← Section Spacer →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Separator

Basic Example

Size

Orientation

API Reference

Separator