Divider Component — Astro

Horizontal or vertical divider line with optional label

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

astro astro 
---
import Divider from '../../components/Divider.astro';
---

<Divider />

With Label

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

Live Example
astro astro 
<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
astro astro 
<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: 3rem;">
  <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

Svelte & Vanilla: Svelte ¡ Vanilla: same HTML and BEM as in Usage above.