Kobalte.v0.13.1

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).

PropDescription
orientation'horizontal' | 'vertical'
The orientation of the separator.
Data attributeDescription
data-orientation='horizontal'Present when the separator has horizontal orientation.
data-orientation='vertical'Present when the separator has vertical orientation.

Rendered elements

ComponentDefault rendered element
Separatorhr