Separator
Visually or semantically divides content elements.
Section one
Intro copy for the first block.
Section two
Content separated by a horizontal rule.
Installation
The component is exported from @by/experience-system. Add the package with your package manager:
pnpm add @by/experience-systemIn this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.
Composition
Use a single Separator where you need a horizontal or vertical rule:
SeparatorUsage
import { Separator } from '@by/experience-system';<div>
<p>Above</p>
<Separator />
<p>Below</p>
</div>Examples
Vertical
Use orientation="vertical" between inline items in a row (fixed height or flex alignment so the rule has height).
Menu
Vertical rules between titled sections with supporting descriptions—common for compact settings or footer clusters.
List
Horizontal Separator rows between list-style key/value lines.
API Reference
Separator wraps SeparatorPrimitive.Root from radix-ui / @radix-ui/react-separator and applies separatorVariants({ variant, dashed }). The Radix Root contract is orientation, decorative, asChild, plus standard React div props (className, style, id, aria-*, …). See the Radix documentation for the full primitive surface.
Separator
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
orientation | horizontal | vertical | horizontal |
decorative | boolean | true |
| Design-system extension | Type | Default |
|---|---|---|
variant | subtle | medium | strong | subtle |
dashed | boolean | false |
| Data attribute | Values |
|---|---|
data-slot | separator |
data-orientation | horizontal | vertical |
Accessibility
When decorative is true (default), the element is hidden from the accessibility tree as a purely visual divider. Set decorative={false} when the separator exposes document structure and should be announced ( role="separator" ). See Radix Separator — accessibility.
Source in the repo: packages/experience-system/src/components/Separator/Separator.tsx. Agent-oriented contracts: packages/experience-system/src/components/Separator/Separator.instructions.md.