Divider

The Divider component visually separates groups of content.

OverviewProperties

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.