SDivider <s-divider>

A horizontal or vertical line that separates content. SDivider is the typed Vue 3 wrapper for Shopify's Polaris <s-divider> web component.

import { SDivider } from 'polaris-vue-elements'

Best practices

• Separate only content that's genuinely different. Dividers earn their place between sections that are clearly distinct. Too many make an interface look cluttered and broken up, so check whether whitespace would group the content just as well.
• Scale the weight to the break. Let a divider's prominence reflect how important the separation is: a major section break can take color="strong", while a minor grouping needs a subtler line or just space.
• Follow the layout's direction. Set direction so the line runs across the flow of the content it separates, between items stacked vertically or between items laid out side by side.
• Try spacing first. Spacing props on your layout components often group content more cleanly than a line. Add a divider to make things clearer, not as a substitute for well-planned spacing.

See Shopify's best practices for <s-divider> for the full guidance.

Example

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Type	Description
color	"base" | "strong"	The visual prominence of the divider line. - base: Standard divider for most separations (default) - strong: More prominent divider for major section breaks
direction	"block" | "inline"	The orientation of the divider line, using logical properties. - inline: Horizontal divider for separating vertically stacked content - block: Vertical divider for separating horizontally arranged content