Separator

Visually or semantically separates content.

Import

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

ts
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 role.
Support for horizontal and vertical orientation.

Anatomy

The separator consists of:

Separator: The root container for a separator.

tsx
<Separator />

tsx
<Separator />

Example

Content above

Content below

API Reference

Separator

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

Prop	Description
orientation	`'horizontal' \| 'vertical'` 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`