# Separator

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/separator
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=342-2

```tsx
import { Separator } from '@commenda/pathfinder/separator';

export const SeparatorDefault = () => (
  <div style={{ width: '100%' }}>
    <p>Registered agent</p>
    <Separator />
    <p>Fiscal year end</p>
  </div>
);
```


## Installation [#installation]

```sh
pnpm --filter your-app add "@commenda/pathfinder@workspace:*"
```

Import `@commenda/pathfinder/styles.css` once after host CSS. Pathfinder ships compiled, prefixed Tailwind v4 CSS; the application needs no Tailwind scanning. Import from `@commenda/pathfinder/separator`. Interactive callbacks belong in a client component in Next.js App Router.

## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `variant` | `"line" \| "label" \| "dot"` | conditional | line; label requires visible label text |
| `orientation` | `"vertical" \| "horizontal"` | optional | horizontal; line only |
| `decorative` | `boolean` | optional | true; line only |
| `label` | `string` | conditional | Required for label; disallowed for other variants |
| `id` | `string` | optional | Stable HTML identifier for the component. |
| `className` | `string` | optional | Additional classes for the component root. |

Root IDs, className, appropriate ARIA attributes, and typed refs are supported.

## Usage rules [#usage-rules]

Use spacing first. A separator has no surrounding margin: its parent owns the layout. Use `decorative={false}` for boundaries that assistive technology should identify. Vertical separators are 16 tall by default; a parent can stretch them through layout classes. Labeled lines keep their text available while hiding the rules. Dot is always decorative.

## Examples [#examples]

### Variants [#variants]


```tsx
import { Separator } from '@commenda/pathfinder/separator';

export const SeparatorVariants = () => (
  <div style={{ display: 'grid', gap: 24, width: '100%' }}>
    <Separator />
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      Subsidiary
      <Separator variant="dot" />
      Berlin
      <Separator orientation="vertical" />
      Active
    </div>
    <Separator variant="label" label="or" />
  </div>
);
```


## Design rules [#design-rules]

Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.

### Separator [#separator]

Source: [342:9](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=342-9), docs 343:542, dot 405:47.

- `SEPARATOR-01` — Source: 0.5 soft-pearl-300 hairline, horizontal fill or vertical 16. Parent owns spacing. A label sits between two lines with 12 gaps; inline dot uses parent gap 6. Prefer whitespace before adding a rule.
- `SEPARATOR-02` — Source/Pathfinder: decorative by default. Meaningful line boundaries expose separator orientation; the label's word remains readable while its lines are decorative. Dot is always decorative and never focusable.

### Source discrepancies and implementation decisions [#source-discrepancies-and-implementation-decisions]

Vertical lines use a 1px inline width to stay visible on standard-density displays; their default height is 16px. The parent owns surrounding spacing.