Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Datadisplay

/

Divider

Dividers are a quick built in way to separate sections of content.

Example


Example


rx.chakra.vstack(
    rx.chakra.text("Example"),
    rx.chakra.divider(border_color="black"),
    rx.chakra.text("Example"),
    rx.chakra.divider(
        variant="dashed", border_color="black"
    ),
    width="100%",
)

If the vertical orientation is used, make sure that the parent component is assigned a height.


rx.chakra.center(
    rx.chakra.divider(
        orientation="vertical", border_color="black"
    ),
    height="4em",
)

Dividers are used to visually separate content in a list or group.

PropTypeDescriptionValues
orientationLiteral

Pass the orientation prop and set it to either horizontal or vertical. If the vertical orientation is used, make sure that the parent element is assigned a height.

variantLiteral

Variant of the divider ("solid" | "dashed")

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting