# Separator

> A thin rule between groups in menus, toolbars and lists.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/separator

Separator is a quiet one-pixel line. It is decorative by default and hidden from assistive technology. Set `decorative={false}` when it divides meaningful groups, for example in a toolbar. For section breaks in page content, use Divider.

## Import

```tsx
import { Separator } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Horizontal

```tsx
import { Separator, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', display: 'grid', gap: 12 }}>
      <Text size="sm">Account</Text>
      <Separator />
      <Text size="sm">Organisation</Text>
    </div>
  );
}
```

### Vertical in a toolbar

```tsx
import { Button, Separator } from '@bindshq/stance-react';

export function Vertical() {
  return (
    <div
      role="toolbar"
      aria-label="Formatting"
      style={{ display: 'flex', alignItems: 'center', gap: 8, height: 32 }}
    >
      <Button variant="ghost" size="sm">
        Bold
      </Button>
      <Button variant="ghost" size="sm">
        Italic
      </Button>
      <Separator orientation="vertical" decorative={false} />
      <Button variant="ghost" size="sm">
        Link
      </Button>
    </div>
  );
}
```

### Between list groups

```tsx
import { Separator, Text } from '@bindshq/stance-react';

export function InList() {
  return (
    <div style={{ width: 220, display: 'grid', gap: 6 }}>
      <Text size="sm">Rename</Text>
      <Text size="sm">Duplicate</Text>
      <Separator />
      <Text size="sm" tone="danger">
        Delete template
      </Text>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Separator | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Line direction. |
| Separator | `decorative` | `boolean` | `true` | Hide from assistive technology; false exposes role="separator". |

## Accessibility

- Decorative separators use role="none".
- Semantic separators expose role="separator" and aria-orientation when vertical.

## Guidelines

**Do**

- Use between groups of related actions.

**Don’t**

- Use as a heading underline.

## Related

- https://stanceui.com/components/divider
- https://stanceui.com/components/toolbar
- https://stanceui.com/components/dropdown-menu