Separator
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Separator } from "@corew500/ui/separator"
<Separator>Content</Separator>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | enum | horizontal | The orientation of the separator. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Accessibility
Screen Readers
- - Uses semantic `role="separator"` for screen readers
- `aria-orientation` automatically set to "horizontal" or "vertical"
- Decorative separators are announced by screen readers as visual boundaries
- For purely visual separators, consider adding `aria-hidden="true"`
Localization
Translatable Content
- - No text content to localize
RTL Support
- Works correctly in both LTR and RTL layouts
Related
- Base UI Separator documentation for additional props