Layout

Separator

A visual divider to separate content sections. Supports horizontal/vertical orientation, labels, icons, and multiple visual styles.

Playground

Experiment with different props in real-time.

Orientation

Color

Size

Type

Label

Basic Usage

A simple horizontal line to divide content.

Content above

Content below

<script lang="ts">
  import { Separator } from 'sv5ui';
</script>

<Separator />

Orientation

Use horizontal or vertical dividers.

Horizontal

Vertical

<!-- Horizontal (default) -->
<Separator />

<!-- Vertical -->
<div class="flex h-8 items-center">
  <Separator orientation="vertical" />
</div>

Types

Choose between solid, dashed, or dotted styles.

Solid

Dashed

Dotted

<Separator type="solid" />
<Separator type="dashed" />
<Separator type="dotted" />

Sizes

Control the thickness of the separator line.

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

Colors

Apply color to the separator line.

Surface

Primary

Secondary

Success

Warning

Error

Info

<Separator color="surface" />
<Separator color="primary" />
<Separator color="secondary" />
<Separator color="success" />
<Separator color="warning" />
<Separator color="error" />
<Separator color="info" />

With Label

Add text in the center of the separator.

Continue

Section

<Separator label="OR" />
<Separator label="Continue" color="primary" />
<Separator label="Section" type="dashed" />

With Icon

Display an icon in the center of the separator.

<Separator icon="lucide:star" />
<Separator icon="lucide:heart" color="error" />
<Separator icon="lucide:zap" color="warning" />

With Avatar

Display an avatar in the center of the separator.

<!-- With image avatar -->
<Separator avatar={{ src: 'https://i.pravatar.cc/150?u=1', alt: 'John Doe' }} />

<!-- With color -->
<Separator avatar={{ src: 'https://i.pravatar.cc/150?u=2', alt: 'Jane Smith' }} color="primary" />

<!-- With text fallback -->
<Separator avatar={{ text: 'AB' }} color="secondary" />

Custom Content

Use the content snippet for fully custom center content.

New

<Separator>
  {#snippet content()}
    <Badge label="New" color="primary" size="sm" />
  {/snippet}
</Separator>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	Root flex container — controls layout direction
`border`	Separator line element — controls color, thickness, style
`container`	Center content wrapper — controls spacing around label/icon
`icon`	Icon element styling
`label`	Label text styling
`avatar`	Avatar element styling
`avatarSize`	Avatar size override

Snippets

Name	Description
`content`	Custom center content, takes precedence over label/icon/avatar

Props

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'surface'`	`'surface'`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'xs'`
`type`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`
`label`	`string`	`-`
`icon`	`string`	`-`
`avatar`	`AvatarProps`	`-`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Container Accordion