A styled <hr> (horizontal) or <div role="separator"> (vertical) with visual variants. Use to separate content sections, list items, or inline elements.
File: src/core/components/primitives/Separator.astro
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | "default" | "dotted" | "dashed" | "wide" | "strong" | "default" | Visual style of the separator |
orientation | "horizontal" | "vertical" | "horizontal" | Horizontal renders <hr>; vertical renders <div role="separator"> with explicit ARIA |
class | string | — | Additional CSS classes |
Usage
---
import Separator from "@core/components/primitives/Separator.astro";
---
{/* Basic horizontal rule */}
<Separator />
{/* Dashed variant */}
<Separator variant="dashed" />
{/* Wide variant — extends beyond content padding */}
<Separator variant="wide" />
{/* Strong variant — thicker border */}
<Separator variant="strong" />
{/* Vertical separator in a flex row */}
<div class="flex items-center gap-md">
<span>Left</span>
<Separator orientation="vertical" />
<span>Right</span>
</div>Accessibility
- Horizontal orientation renders a native
<hr>element, which is a thematic break — no ARIA attributes needed. - Vertical orientation renders
<div role="separator" aria-orientation="vertical">because vertical dividers are not thematic breaks and require explicit ARIA semantics. - The component is purely decorative/structural — no keyboard interaction required.