Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Layout

/

Separator

Visually or semantically separates content.

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

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",
)

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",
)

Visually or semantically separates content.

PropTypeDescriptionValues
sizeLiteral

The size of the select: "1" | "2" | "3" | "4"

color_schemeLiteral

The color of the select

orientationLiteral

The orientation of the separator.

decorativebool

When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.

Event Triggers

No component specific event triggers

← SectionSpacer →

Did you find this useful?