# Separator

Ein Separator ist eine Linie, die inhaltliche Abschnitte voneinander abgrenzt.

```tsx
import { Separator } from "@mittwald/flow-react-components";

<Separator />
```

---

# Best Practices

- Verlasse dich auf die automatische Trennung durch die
  [Section](https://flow.mittwald.de/04-components/structure/section). Zwischen Sections mit einer
  H2-[Heading](https://flow.mittwald.de/04-components/content/heading) setzt sie den Separator meist
  selbst.
- Richte die Breite des Separators an der Breite des Content-Bereichs aus.
- Setze den Separator sparsam ein. Bei zu häufiger Verwendung geht die
  strukturierende Wirkung verloren.

---

# Orientierung

Über das Property `orientation` lässt sich der Separator auch vertikal
ausrichten, um nebeneinanderliegende Inhalte voneinander abzugrenzen.

```tsx
import {
  Flex,
  Separator,
  Text,
} from "@mittwald/flow-react-components";

<Flex direction="row" gap="l">
  <Text>Links</Text>
  <Separator orientation="vertical" />
  <Text>Rechts</Text>
</Flex>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | `'react-aria-Separator'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| `dir` | `string` | - | - |
| `elementType` | `string` | - | The HTML element type that will be used to render the separator. |
| `hidden` | `boolean` | - | - |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inert` | `boolean` | - | - |
| `lang` | `string` | - | - |
| `orientation` | `Orientation` | `'horizontal'` | The orientation of the separator. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| `slot` | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `style` | `StyleOrFunction<TooltipRenderProps>` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `translate` | `"yes" \| "no"` | - | - |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | - | - |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. |