> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Separator
> A thin horizontal or vertical line for visually dividing content sections — supports decorative and semantic usage.
## Overview
Section A
Section B
Item 1Item 2Item 3
**Separator** renders a thin `` or `
` line to visually separate content sections. It can be horizontal (default) or vertical, and decorative (hidden from screen readers) or semantic.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Separator } from "@araf-ds/core"
export default function Example() {
return (
Section A
Section B
)
}
```
***
## Variants
### Horizontal (Default)
Typography
A collection of font styles used across the design system.
Spacing
Base-4 spacing scale from 4px to 96px.
```tsx theme={null}
Typography
A collection of font styles used across the design system.
Spacing
Base-4 spacing scale from 4px to 96px.
```
### Vertical
BlogDocsSource
```tsx theme={null}
BlogDocsSource
```
### With Label ("OR" divider)
OR
```tsx theme={null}
OR
```
***
## API Reference
Direction of the line. Values: `horizontal` · `vertical`
When `true`, the separator is hidden from screen readers (`aria-hidden="true"`). Set to `false` when the separator has semantic meaning (e.g. separating distinct content sections).
Additional class names for custom color, thickness, or spacing.
***
## Accessibility
* Decorative separators (`decorative={true}`) render with `aria-hidden="true"` — screen readers skip them
* Semantic separators (`decorative={false}`) render as `` — screen readers announce the division
* Vertical separators inside flex containers must have an explicit height set via `className` or `style`
***
## Do's & Don'ts
* Use `orientation="vertical"` inside `flex` rows (nav links, breadcrumbs, toolbars)
* Use `decorative={false}` when separating distinct, non-obvious content sections
* Combine with a label ("OR", "AND") for auth flows or filter sections
* Use consistent spacing (`my-4` or `my-6`) above and below separators
* Don't overuse separators — too many creates visual noise
* Don't use Separator as a border replacement for cards or panels
* Don't forget to set height for vertical separators — they won't show without it
* Don't use a `` directly — use this component to ensure correct ARIA attributes