# Separator

> A quiet line that divides content, across or along.

- **Level**: atom · **Status**: stable · **Role**: boundary
- **Import**: `import { Separator } from "@rrios-forge/ui/atoms/separator";`
- **Source**: `packages/ui/src/atoms/separator`

Semantic divider line. Composes `@radix-ui/react-separator` so the ARIA contract is right by construction (`role="separator"` + `aria-orientation` when meaningful, `aria-hidden` when decorative). Visually a 1 px line in `boundary.default`.

## Use it for

- Avatar / badge / separator / icon → `Avatar` / `Badge` / `Separator` / `Icon`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` `vertical` | `horizontal` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |

## Stories

- [Playground](/?path=/story/components-atoms-separator--playground) · frame: `/iframe.html?id=components-atoms-separator--playground&viewMode=story`
- [Orientations](/?path=/story/components-atoms-separator--orientations) · frame: `/iframe.html?id=components-atoms-separator--orientations&viewMode=story`
- [In context](/?path=/story/components-atoms-separator--in-context) · frame: `/iframe.html?id=components-atoms-separator--in-context&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).