Skip to main content
PROYECTOVIVIANA

Separator

A visual divider between groups of content. Supports horizontal and vertical orientations, multiple sizes, and visual variants.

Import

import { Separator } from '@proyecto-viviana/solid-spectrum';

Horizontal

The default orientation divides content vertically.

Content above the separator.

Content below the separator.

<p>Content above</p>
<Separator />
<p>Content below</p>

Vertical

Use orientation='vertical' to divide content horizontally.

Item 1Item 2Item 3
<div class="separator-row">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
  <Separator orientation="vertical" />
  <span>Item 3</span>
</div>

Sizes

Controls the thickness of the separator line.

sm
md
lg
<Separator size="sm" />
<Separator size="md" />
<Separator size="lg" />

Variants

Visual style variants for different emphasis levels.

default
subtle
strong
<Separator variant="default" />
<Separator variant="subtle" />
<Separator variant="strong" />

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the separator
size'sm' | 'md' | 'lg''md'Thickness of the separator line
variant'default' | 'subtle' | 'strong''default'Visual emphasis
classstring—Additional CSS classes

Accessibility

  • Uses role="separator" for proper semantics
  • Vertical separators include aria-orientation="vertical"
  • Decorative separators can use aria-hidden="true"