Divider

Supports horizontal and vertical directions

Direction can responsively change based on the viewport size



Usage

You can use the Stack utility divided property whenever you need to separate a group of items. It uses the Divider component under the hood.

Dividers can be used to separate content horizontally and vertically.

Vertical dividers take the full height of their 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 renders a line that takes 1px of space. You can disable this behavior with the blank property. That can make it easier to use components like borderless Tabs where Divider overlaps with the component content.

Properties

Name
Type
vertical
boolean
blank
boolean
className
Array<
string
undefined
null
false
>
attributes
object