Layout · astro-ui · Separator

Separator

Horizontal/vertical divider with solid, dashed, and dotted styles.

Separator renders a themed rule between sections — semantic hr (or a decorated span when purely visual), with orientation, style, and label support.

← All components

Features

  • Horizontal / vertical orientation
  • solid / dashed / dotted styles
  • Optional centered label ("or", section names)
  • Semantic hr or decorative span

Usage

---
import { Separator } from "astro-ui";
---

<Separator />
<Separator orientation="vertical" style="height:2rem" />
<Separator label="or" />

Demos

Horizontal & vertical

Above the rule.

Below the rule.

<p>Above the rule.</p>
<Separator />
<p>Below the rule.</p>

Line variants

<Separator />
<Separator variant="dashed" />
<Separator variant="dotted" />
<Separator variant="double" />
<Separator variant="gradient" />
<Separator variant="faded" />

Vertical variants

BeforeAfterEnd
<span>Before</span>
<Separator orientation="vertical" variant="dashed" />
<span>After</span>
<Separator orientation="vertical" variant="double" />
<span>End</span>

Labeled divider

Some content above.

Some content below.

<Separator variant="labeled">or continue with</Separator>

API

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Rule direction.
variant"solid" | "dashed" | "dotted" | "double" | "gradient" | "faded" | "labeled""solid"Line treatment; labeled centers slot content between two lines (horizontal only).
labelstring—Accessible name when the separator delimits labelled regions.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.

Slots

SlotDescription
defaultLabel content (overrides the label prop).

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Renders semantic <hr> by default (separator role implicit)
  • decorative prop downgrades to aria-hidden span when the rule is purely visual
  • Optional label is read by screen readers ("or" between form actions)

FAQ

hr or span?

Semantic <hr> by default — it announces a thematic break. Pass decorative when the rule is purely visual spacing.

Changelog

Version history mentioning Separator.

v0.1.0 — 2026-11-11
added
  • Layout (7): Card, AspectRatio, ScrollArea, Separator, Accordion, Collapsible, StickySurface.