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 users scan and understand content organization.

Dividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. 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.

Support
Targets (24)

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 Add a horizontal dividerAdd a horizontal divider

Display a horizontal divider to separate content sections.

Add a horizontal divider

A single horizontal line separating content sections.

html

<s-divider></s-divider>

Anchor to Separate items in a listSeparate items in a list

Place dividers between repeated content blocks to create a scannable list. This example separates saved addresses so customers can quickly distinguish each entry.

html

<s-stack direction="block" gap="base">
<s-stack direction="block" gap="small-200">
<s-text type="strong">Home</s-text>
<s-text>123 Main St</s-text>
<s-text>Toronto, ON M5V 2H1</s-text>
</s-stack>
<s-divider></s-divider>
<s-stack direction="block" gap="small-200">
<s-text type="strong">Work</s-text>
<s-text>456 King St W</s-text>
<s-text>Toronto, ON M5V 1K4</s-text>
</s-stack>
<s-divider></s-divider>
<s-stack direction="block" gap="small-200">
<s-text type="strong">Cottage</s-text>
<s-text>789 Lakeside Rd</s-text>
<s-text>Muskoka, ON P1L 1A1</s-text>
</s-stack>
</s-stack>

Anchor to Create a vertical divider between inline itemsCreate a vertical divider between inline items

Set direction="block" to create a vertical divider between horizontally arranged elements. This example separates an order number, date, and status badge in an inline stack.

html

<s-stack direction="inline" gap="base" alignItems="center">
<s-text>Order #1042</s-text>
<s-divider direction="block"></s-divider>
<s-text>March 15, 2026</s-text>
<s-divider direction="block"></s-divider>
<s-badge tone="auto">Delivered</s-badge>
</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 orientation to layout direction: Use horizontal dividers in vertical layouts and vertical dividers in horizontal layouts for natural visual flow.
  • 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?