Skip to main content

Divider

    The Divider component visually separates groups of content.

    OverviewPropertiesChangelog

    Import​

    import { Divider } from '@dynatrace/strato-components/layouts';

    Demo​

    Change orientation​

    A vertical Divider creates a toolbar-like separation of two content sections. The orientation prop lets you control whether the divider should be vertical or horizontal.

    Change variant​

    Use the variant prop to create the different contextual divider variants.

    Change color​

    Use the color prop to change the color of the dividing line according to your context.

    Use without flex styles​

    The flexItem prop allows you to control whether flex styles are applied for the Divider. Flex styles are enabled by default, ensuring the automatic application of the right styles for usage within a flex layout.

    When using the Divider outside of a flex layout, you can set the flexItem prop to false. In this case, you need to wrap the Divider in a block-level HTML element and set the desired dimension on that element.

    Still have questions?
    Find answers in the Dynatrace Community