Skip to main content

Divider

The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping buyers scan and understand content organization.

Dividers support both horizontal and vertical orientations. For more structured content grouping with headings, use section.

Dividers are purely decorative — they don't carry semantic meaning and aren't announced by assistive technologies. For accessible content regions, use section.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the divider component.

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

The orientation of the divider, using logical properties.

  • inline: A horizontal divider that separates content stacked vertically.
  • block: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.
Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Insert a default horizontal dividerInsert a default horizontal divider

Insert a horizontal rule between content groups. This example places a default s-divider between a section label and its supporting text.

Insert a default horizontal divider

A rendered example of the divider component

html

<s-divider></s-divider>

Anchor to Separate inline content with a vertical dividerSeparate inline content with a vertical divider

Draw a vertical rule between side-by-side items. This example places direction="block" on s-divider inside an inline stack to separate subtotal and tax labels.

html

<s-stack direction="inline" gap="small" alignItems="center">
<s-text>Subtotal</s-text>
<s-divider direction="block"></s-divider>
<s-text>Estimated tax</s-text>
</s-stack>

Anchor to Add a horizontal divider between inline itemsAdd a horizontal divider between inline items

Add a horizontal rule between side-by-side items. This example places direction="inline" on s-divider between two text elements inside an inline stack.

html

<s-stack direction="inline" gap="base" alignItems="center">
<s-text>Subtotal</s-text>
<s-divider direction="inline"></s-divider>
<s-text>$49.99</s-text>
</s-stack>

Anchor to Best practicesBest practices

  • Use dividers sparingly: Too many dividers can make a page feel cluttered. Rely on spacing and grouping first, and add dividers only where content boundaries aren't clear from layout alone.
  • Match direction to layout axis: Use direction="block" in vertical stacks and direction="inline" in horizontal rows.
  • Prefer sections for labeled groups: If the content groups have headings, use section instead of raw dividers for better semantics and accessibility.
Was this page helpful?