id: separator
label: Separator
family: family-h-layout
category: Layout
intent: Visually divide content sections
description: Visual divider line
composable: false
capabilities: Orientation
required_parts: []
optional_parts: []
tags: ["separator", "divider", "line", "hr", "section"]
keywords:
pain: Dividers lack semantic meaning and accessibility roles
promise: Separator semantics enforced via orientation and role contract
why: |
SeparatorPrimitive encodes orientation and decorative behavior. ARIA roles are derived automatically. This guarantees semantic and accessible separators.
rules: ["CR-001", "CR-004"]
use_cases: ["layout separation", "menus"]
related: ["card", "resizable", "scroll_area", "aspect_ratio", "page_header", "toolbar"]
file: separator_ui.css
tokens: separator-*, size-*
foundation: size
states: []
island: separator_boundary.rs
pillar: layout
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift"]
before: |
// ❌ Typical
view! {
<hr />
}
after: |
// ✅ CanonRS
view! {
<Separator />
}
boundary_type: passthrough
block: []
blocks_primitives: [stack]