Divider

Dividers are elements for visual content separation.
Supports horizontal and vertical directions
Direction can responsively change based on the viewport size


Usage

Whenever you need to separate a group of items, Stack utility divided property can be used instead of manually handling the layout. It uses Divider component under the hood.

Dividers can be used to separate content horizontally and vertically.

Vertical dividers take the full-height of its parent. This property is responsive which means you can use an object syntax to define its behavior for different viewports: vertical={{ s: true, l: false }}.

Divider takes some space to be displayed which can be disabled with blank property. That can make it easier for you to use components like borderless Tabs where Divider has to overlap with the component.

Properties

NameTypeDefaultRequiredComment
verticalResponsive(boolean)-false
blankboolean-falseShould take no space?
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element