Choose a version:

Divider

Create clear visual separation between elements in your user interface.

Anchor to propertiesProperties

Anchor to color color "base" | "strong" Default: 'base': Modify the color to be more or less intense.
Anchor to direction direction "inline" | "block" Default: 'inline': Specify the direction of the divider. This uses logical properties.

Was this section helpful?

Code

<s-divider />

Anchor to useful-forUseful for

Separating elements inside sections.
Visually grouping related content in forms and lists.

Was this section helpful?

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Demonstrates the default divider with standard base color and inline direction.

Anchor to example-custom-colorCustom color

Shows a divider with a strong color variant for increased visual emphasis.

Anchor to example-custom-directionCustom direction

Illustrates using a block-direction divider within an inline stack to create vertical separation between items.

Anchor to example-separating-form-sectionsSeparating form sections

Uses a divider to visually group and separate different sections of a form, improving readability and user comprehension.

Anchor to example-organizing-settings-panelsOrganizing settings panels

Demonstrates using a divider to logically separate basic and advanced settings in a configuration panel.

Anchor to example-visual-breaks-in-section-layoutsVisual breaks in section layouts

Shows how dividers can be used to create clean, segmented sections within a section, improving information hierarchy.

Anchor to example-separating-content-sectionsSeparating content sections

Illustrates using dividers to create clear, visually distinct sections for different metrics or content blocks.

Was this section helpful?

Basic usage

<s-divider />

Examples

Basic usage
Description
Demonstrates the default divider with standard base color and inline direction.
jsx
```
<s-divider />
```
html
```
<s-divider></s-divider>
```
Custom color
Description
Shows a divider with a strong color variant for increased visual emphasis.
jsx
```
<s-divider color="strong" />
```
html
```
<s-divider color="strong"></s-divider>
```

Custom direction

Description

Illustrates using a block-direction divider within an inline stack to create vertical separation between items.

jsx

<s-stack direction="inline" gap="base">
  <s-text>Item 1</s-text>
  <s-divider direction="block" />
  <s-text>Item 2</s-text>
</s-stack>

html

<s-stack direction="inline" gap="base">
  <s-text>Item 1</s-text>
  <s-divider direction="block"></s-divider>
  <s-text>Item 2</s-text>
</s-stack>

Separating form sections

Description

Uses a divider to visually group and separate different sections of a form, improving readability and user comprehension.

jsx

<s-stack gap="base">
  <s-text-field label="Store name" />
  <s-text-field label="Description" />
  <s-divider />
  <s-text-field label="Email address" />
  <s-text-field label="Phone number" />
</s-stack>

html

<s-stack gap="base">
  <s-text-field label="Store name"></s-text-field>
  <s-text-field label="Description"></s-text-field>
  <s-divider></s-divider>
  <s-text-field label="Email address"></s-text-field>
  <s-text-field label="Phone number"></s-text-field>
</s-stack>

Organizing settings panels

Description

Demonstrates using a divider to logically separate basic and advanced settings in a configuration panel.

jsx

<s-box padding="base">
  <s-stack gap="base">
    <s-switch label="Email notifications" />
    <s-switch label="Auto-save" />
    <s-divider />
    <s-switch label="Advanced settings" />
    <s-switch label="Developer tools" />
  </s-stack>
</s-box>

html

<s-box padding="base">
  <s-stack gap="base">
    <s-switch label="Email notifications"></s-switch>
    <s-switch label="Auto-save"></s-switch>
    <s-divider></s-divider>
    <s-switch label="Advanced settings"></s-switch>
    <s-switch label="Developer tools"></s-switch>
  </s-stack>
</s-box>

Visual breaks in section layouts

Description

Shows how dividers can be used to create clean, segmented sections within a section, improving information hierarchy.

jsx

<s-box padding="large-400" background="base">
  <s-stack gap="base">
    <s-heading>Order summary</s-heading>
    <s-text>3 items</s-text>
    <s-divider />
    <s-heading>Shipping address</s-heading>
    <s-text>123 Main Street, Toronto ON</s-text>
    <s-divider />
    <s-heading>Payment method</s-heading>
    <s-text>•••• 4242</s-text>
  </s-stack>
</s-box>

html

<s-box padding="large-400" background="base">
  <s-stack gap="base">
    <s-heading>Order summary</s-heading>
    <s-text>3 items</s-text>
    <s-divider></s-divider>
    <s-heading>Shipping address</s-heading>
    <s-text>123 Main Street, Toronto ON</s-text>
    <s-divider></s-divider>
    <s-heading>Payment method</s-heading>
    <s-text>•••• 4242</s-text>
  </s-stack>
</s-box>

Separating content sections

Description

Illustrates using dividers to create clear, visually distinct sections for different metrics or content blocks.

jsx

<s-stack gap="base">
  <s-box padding="base">
    <s-text>150 orders</s-text>
  </s-box>
  <s-divider />
  <s-box padding="base">
    <s-text>$2,400 revenue</s-text>
  </s-box>
  <s-divider />
  <s-box padding="base">
    <s-text>89 customers</s-text>
  </s-box>
</s-stack>

html

<s-stack gap="base">
  <s-box padding="base">
    <s-text>150 orders</s-text>
  </s-box>
  <s-divider></s-divider>
  <s-box padding="base">
    <s-text>$2,400 revenue</s-text>
  </s-box>
  <s-divider></s-divider>
  <s-box padding="base">
    <s-text>89 customers</s-text>
  </s-box>
</s-stack>