# Separator

Draws a rule between groups of content.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Separator.tsx)

## Overview

A separator is a 1px rule between thematic groups, such as menu sections or toolbar clusters.

Use it where spacing alone does not separate the groups clearly.

## Examples

### Basic

```tsx
import { Separator, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      <span>Above</span>
      <Separator />
      <span>Below</span>
    </div>
  )
}

namespace styles {
  export const stack = style({
    display: 'flex',
    flexDirection: 'column',
    gap: '3',
    maxWidth: '16rem !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Separator/Basic.tsx)

### Orientation

Set `orientation` to `horizontal` or `vertical`. It defaults to `horizontal`.

```tsx
import { Separator, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <span>Left</span>
      <Separator orientation="vertical" />
      <span>Right</span>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3', height: '6' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Separator/Orientation.tsx)

## Guidelines

TODO: Write guidelines for Separator.