Divider — Svelte

Divider component — Svelte.

Divider component

A simple divider for visually separating content. Supports horizontal (default) and vertical orientation, and an optional label (e.g. "OR") in the middle for horizontal dividers.

Props

  • orientation (string, optional) — horizontal, vertical (default: horizontal)
  • label (string, optional) — Optional text shown in the middle (horizontal only)
  • class (string, optional) — Additional CSS classes

Basic usage (horizontal)

Live example

Content above

Content below

svelte svelte 
<script>
  import Divider from './components/svelte/Divider.svelte';
</script>

<Divider />

With label

Use label to show text in the middle (e.g. "OR" between two options).

Live example
svelte svelte 
<Divider label="OR" />

Vertical

Use orientation="vertical" inside a flex row to separate items. The parent should have a defined height (e.g. min-height or height).

Live example
Item 1 Item 2 Item 3
svelte svelte 
<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-16);">
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
  <Divider orientation="vertical" />
  <span>Item 3</span>
</div>

Features

  • Accessible — role="separator" and aria-orientation; optional aria-label when label is set
  • Horizontal — Full-width line; optional label in the center
  • Vertical — Full-height line for use in flex layouts
  • Theme-aware — Uses --border and --text-dim

Usage

svelte svelte 
<script>
  import Divider from './components/svelte/Divider.svelte';
</script>

<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />