Divider

A Divider is used to visually separate groups of content.

Import

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

Use cases

The Divider component separates and distinguishes sections of content or groups of different items.

CodeSandbox

Change the orientation

Use a vertical Divider to have a toolbar-like separation of two content sections.

CodeSandbox

Change the variant

Use the variant prop to create the different contextual divider variants. When no variant is specified, it's set to default.

CodeSandbox

Change the color

By default, the divider has the color neutral. You should always consider the meaning behind the colors when changing this.

CodeSandbox

Use it with or without flex styles

By default, the Divider enables flex styles. So if you use it inside a Flex container, the flexItem prop is set to true, and the right styles are automatically applied. However, if you don't need flex styles, you can set the flexItem prop to false. In this case, you would need to wrap the Divider in a container HTML tag and set the desired width/height (depending on the orientation) on that HTML element.

CodeSandbox

Props

DividerProps

extends,

Name	Type	Default	Description
orientation?	|	'horizontal'	Orientation of the Divider component.
as?	|	'div'	Control the HTML tag used for rendering the Divider.
flexItem?		true	Indicate whether the Divider is used inside a Flex component to apply the right styling. If set to false, make sure to have an explicit width/height style set on a parent HTML tag.
color?	| | | |	'neutral'	The color of the Divider.
variant?	|	'default'	The visual style of the Divider.