Pipe Separator

A vertical divider to segment inline content.

UsageAPI

To horizontally separate linear content into sections clearly when clarity and distinction between elements are needed.

If it creates visual clutter as it can negatively impact readability.
If other visual cues already provide sufficient differentiation between content.

ReactVanilla

<PipeSeparator />

<PipeSeparator />

<span class="swan-pipe-separator" role="presentation">|</span>

<span class="swan-pipe-separator" role="presentation">|</span>

ReactVanilla

<>
  First item
  <PipeSeparator />
  Second item
  <PipeSeparator />
  Third item
</>

<>
  First item
  <PipeSeparator />
  Second item
  <PipeSeparator />
  Third item
</>

<div>
  First item
  <span class="swan-pipe-separator">|</span>
  Second item
  <span class="swan-pipe-separator">|</span>
  Third item
</div>

<div>
  First item
  <span class="swan-pipe-separator">|</span>
  Second item
  <span class="swan-pipe-separator">|</span>
  Third item
</div>

Props

This component does not have any custom props. Core props can still be used.

Was this page useful?

Published: Jan 25, 2022Last updated: Sep 3, 2024