Separator
Visually or semantically separates content.
Import
ts
ts
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.Root: The root container for a separator.
tsx
tsx
Example
Content above
Content below
Content below
API Reference
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.Root | hr |