# Separator

Visually or semantically separates content.

## Import

```
Copyts
import { Separator } from "@kobalte/core/separator";
// or
import { Root } from "@kobalte/core/separator";
// or (deprecated)
import { Separator } from "@kobalte/core";
```

```
Copyts
import { Separator } from "@kobalte/core/separator";
// or
import { Root } from "@kobalte/core/separator";
// or (deprecated)
import { Separator } from "@kobalte/core";
```

## Features

- Native HTML `<hr>` element support.
- Custom element type support via the [WAI ARIA Separator](https://w3c.github.io/aria/#separator) role.
- Support for horizontal and vertical orientation.

## Anatomy

The separator consists of:

- **Separator:** The root container for a separator.

```
Copytsx
<Separator />
```

```
Copytsx
<Separator />
```

## Example

Content above

* * *

Content below

index.tsxstyle.css

```
Copytsx
import { Separator } from "@kobalte/core/separator";
import "./style.css";

function App() {
  return (
    <div>
      <span>Content above</span>
      <Separator class="separator" />
      <span>Content below</span>
    </div>
  );
}
```

```
Copytsx
import { Separator } from "@kobalte/core/separator";
import "./style.css";

function App() {
  return (
    <div>
      <span>Content above</span>
      <Separator class="separator" />
      <span>Content below</span>
    </div>
  );
}
```

## API Reference

### Separator

`Separator` is equivalent to the `Root` import from `@kobalte/core/separator` (and deprecated `Separator.Root`).

| Prop | Description |
| --- | --- |
| orientation | `'horizontal' | 'vertical'`<br> The orientation of the separator. |

| Data attribute | Description |
| --- | --- |
| data-orientation='horizontal' | Present when the separator has horizontal orientation. |
| data-orientation='vertical' | Present when the separator has vertical orientation. |

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `Separator` | `hr` |

Previous[←Select](https://kobalte.dev/docs/core/components/select)Next[Skeleton→](https://kobalte.dev/docs/core/components/skeleton)