Pipe Separator

A vertical divider to segment inline content.

UsageAPI

Use Pipe Separator...

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

Don't use Pipe Separator...

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

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.

PipeSeparator

Renders <span>. No props beyond core props and native HTML attributes.

Pipe Separator

Use Pipe Separator...

Don't use Pipe Separator...

Props

Related