Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting