Line

Updated: May 9, 2025

The Line component is used to create horizontal or vertical divider lines with consistent styling. It's useful for visually separating content sections in your application.

Line

Content between lines

<Column gap="24" fillWidth horizontal="center">
  <Line />
  <Text>Content between lines</Text>
  <Line />
</Column>

Vertical line

Use the vert prop to create a vertical line instead of a horizontal one.

Vertical

Left side

Right side

<Row gap="32" height="80" center>
  <Text>Left side</Text>
  <Line vert height="80" />
  <Text>Right side</Text>
</Row>

Custom styling

The Line component inherits all Flex props, allowing for customization of its appearance.

Custom styling

<Line background="brand-strong" />
<Line background="accent-strong" />
<Line background="danger-strong" />
<Line background="warning-strong" />

Spacing

Add margin to create space around the line.

Spacing

Content above line

Content below line

<Text>Content above line</Text>
<Line marginY="16" />
<Text>Content below line</Text>

API reference

Prop	Type	Default
vert Draw it vertically instead of horizontally.	boolean	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—
className	string	—

ComponentsKbd

ComponentsList

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club