Skip to main content

    Divider

    The Divider component visually separates groups of content.

    OverviewProperties

    Import​

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

    Use cases​

    CodeSandbox

    Change the 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.

    CodeSandbox

    Change the variant​

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

    CodeSandbox

    Change the color​

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

    CodeSandbox

    Use it 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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community