Layout

Divider

Thin decorative or semantic separator between content regions, with optional vertical orientation and tonal variants.

import { Divider } from '@lostgradient/cinder/divider';
layoutseparator
01

Overview

A 1px visual rule for separating content regions. Horizontal by default; pass orientation="vertical" for toolbar group separators inside a flex container.

The canonical use case is vertical dividers between toolbar groups—for example, between action clusters in a NavigationBar. Because toolbars use horizontal flex layout, a vertical divider stretches to the row height automatically via align-self: stretch.

Usage

svelte 
<script lang="ts">
  import Divider from '@lostgradient/cinder/divider';
</script>

<!-- Horizontal rule between sections -->
<Divider />

<!-- Vertical rule between toolbar groups -->
<div style="display: flex; align-items: center; gap: 8px;">
  <button>Bold</button>
  <Divider orientation="vertical" />
  <button>Insert</button>
</div>

Accessibility

decorative={true} (the default) hides the element from assistive technology entirely with aria-hidden="true". Use this for visual polish only.

decorative={false} exposes the element to screen readers. A horizontal divider renders as <hr>; a vertical divider renders as <span role="separator" aria-orientation="vertical">.

Live preview
02

When to use

Use when
  • Visually separating sections of a card, list, or toolbar without adding heading-level structure.
  • Splitting a row of inline controls (e.g. a button-group toolbar) with a vertical rule.
Avoid when
  • The split between sections deserves a heading — use section-heading instead.
  • Wrapping the entire viewport edge — use surface or a hand-rolled page scaffold instead.
03

Examples

Basic divider

Default horizontal rule, subtle tone.

Inset divider

Horizontal rule shortened by --cinder-space-2 on each side.

Vertical divider

Vertical separator between toolbar groups in a flex row.

04

Props

Props for divider
Name Type Default Required Bindable Description
orientation 'horizontal' | 'vertical' 'horizontal' Layout axis the rule spans.
inset boolean false Shortens the rule by --cinder-space-2 on the perpendicular axis, creating visual breathing room at either end.
tone 'subtle' | 'strong' 'subtle' Visual weight of the divider line.
decorative boolean true When true the element is hidden from assistive technology (aria-hidden="true"). When false the element carries an explicit separator role.