# Separator

> A 1px hairline between groups of content in one region, horizontal or vertical, with an optional word in the middle of a horizontal one.

Source: https://raft-design.botiverse.build/components/separator. Generated from the current release; where it differs from what you remember, this page is right.

A separator is a 1px `line-hairline` between two groups of content in the same region: two groups of settings, or two controls in a row. A horizontal separator can carry a short word in its middle that names the group after it, such as Actions. Lines between regions are not separators; they belong to the regions ([Page structure](https://raft-design.botiverse.build/patterns/page-structure.md#one-line-between-two-regions)).

```tsx
import { Separator, Text } from "@botiverse/raft-ui";

export function SeparatorHorizontalContent() {
  return (
    <div className="grid w-56 gap-3">
      <Text.Sans size="small">Channel settings</Text.Sans>
      <Separator />
      <Text.Sans size="small">Visibility actions</Text.Sans>
    </div>
  );
}
```

## When to use

| Situation                                                   | Use                                                                                           |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Two groups of content in one region                         | Separator                                                                                     |
| Two groups of controls in a row of fixed height             | Separator with `orientation="vertical"`                                                       |
| A named break before a group                                | Separator with a word: Actions                                                                |
| Sections of a menu, a select list or a popover              | The component's own separator: `DropdownMenuSeparator`, `SelectSeparator`, `PopoverSeparator` |
| Rows of a list                                              | The list's own dividers ([ListRow](https://raft-design.botiverse.build/components/list-row.md))                                  |
| A header and its content, a rail and a sidebar, two columns | The `line-seam` the region draws ([Color](https://raft-design.botiverse.build/foundations/color.md#lines))  |
| Sections of a large form                                    | [FormSection](https://raft-design.botiverse.build/components/form-section.md), which draws its own hairline                  |

## Variants

| Variant                              | Use for                                                                                       |
| ------------------------------------ | --------------------------------------------------------------------------------------------- |
| `orientation="horizontal"` (default) | Stacked groups. It takes the full width                                                       |
| `orientation="vertical"`             | Groups side by side in a row. It takes the height of the row, so the row needs a fixed height |
| Horizontal, with children            | A word between two lines, in `text-footnote`, semibold, `foreground-hint`                     |

## Content

- Keep the word short, in sentence case: Actions.

## Accessibility

- Separator wraps the Base UI Separator, which gives it the `separator` role and its orientation.
- The two lines around a word are hidden from assistive technology; the word is read.

## Rules

- Use only `line-hairline` in a separator. Don't restyle it as a seam or a strong line: each line means something ([Color](https://raft-design.botiverse.build/foundations/color.md#lines)).
- Never draw a separator next to a region's own edge. Two 1px lines side by side read as one 2px line ([Page structure](https://raft-design.botiverse.build/patterns/page-structure.md#one-line-between-two-regions)).

## API

### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  |  |
| `orientation` | `Orientation` | `"horizontal"` | The orientation of the separator. |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.