Separator
Semantic separators for horizontal sections and vertical control groups.
Contract
TRSeparator marks a meaningful boundary with role="separator". Its orientation accepts horizontal or vertical and defaults to horizontal. Use role="presentation" only when the line is purely visual and does not separate content.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/separator.css';Scroll inside the code area to read long lines.
Imports
import { TRSeparator } from '@tinyrack/ui/components/separator';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Meaningful and decorative permalink
Keep the default role for a content boundary. Remove separator semantics from a line that is only visual.
API
Orientation and semantics
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Sets the visual direction and the separator's aria-orientation. |
role | React.AriaRole | 'separator' | Use presentation for a purely decorative line; separator-only orientation ARIA is then omitted. |
render | ReactElement | <div /> | Replaces the rendered element while preserving separator behavior and classes. |
Composition and styling
All supported native <div> props, className, style, and ref are forwarded. Customize appearance with --tr-separator-color, --tr-separator-thickness, and --tr-separator-min-length.