Skip to main content

Divider

The divider component creates visual separation between content sections by rendering a horizontal or vertical line. Use it to organize information and improve content hierarchy.

Support
Targets (8)

Supported targets

Anchor to Use casesUse cases

  • Content separation: Separate distinct content sections within forms, lists, or panels.
  • Visual breaks: Create breaks between groups of related actions or controls.
  • Information boundaries: Establish clear boundaries between different types of information.
  • Hierarchy: Improve content hierarchy by dividing complex interfaces into digestible sections.

Anchor to PropertiesProperties

Displays a visual separator between content sections.

Anchor to direction
direction
'inline' | 'block'
Default: 'inline'

Specify the direction of the divider. This uses logical properties.

Anchor to id
id
string

A unique identifier for the element.

Anchor to ExamplesExamples

Anchor to Separate content sections with a dividerSeparate content sections with a divider

Separate content sections using a divider component. This example shows a basic horizontal divider.

Separate content sections with a divider

Separate content sections using a divider component. This example shows a basic horizontal divider.

Separate content sections with a divider

<s-divider />

Anchor to Best practicesBest practices

  • Choose appropriate direction: Use inline (horizontal) for most content separation. Use block (vertical) for columns or sidebar boundaries.
  • Avoid overuse: Use dividers strategically. In dense interfaces, consider whitespace or typography hierarchy instead.
Was this page helpful?