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