Separator
Separators are non-interactive visual dividers between related groups of content, controls, or menu actions.
Try it
Start
End
End
Usage
Use the default horizontal separator to divide stacked content. Use a vertical separator between control groups in a horizontal toolbar.
import { RuiSeparator } from '@ecopages/radiant-ui/separator';
import { RuiButton } from '@ecopages/radiant-ui/button';
import { RuiToolbar } from '@ecopages/radiant-ui/toolbar';
<RuiToolbar label="Text formatting">
<RuiButton toggle variant="ghost" square aria-label="Bold"><strong aria-hidden="true">B</strong></RuiButton>
<RuiButton toggle variant="ghost" square aria-label="Italic"><em aria-hidden="true">I</em></RuiButton>
<RuiSeparator orientation="vertical" />
<RuiButton toggle variant="ghost" square aria-label="Underline"><u aria-hidden="true">U</u></RuiButton>
<RuiButton toggle variant="ghost" square aria-label="Strikethrough"><s aria-hidden="true">S</s></RuiButton>
</RuiToolbar>API
RuiSeparator renders an <hr role="separator">; it is a JSX helper, not a custom element.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | horizontal · vertical | horizontal | Visual direction and aria-orientation value. |
CSS classes
| Class | Description |
|---|---|
.rui-separator | Generic horizontal or vertical separator. |
Accessibility
- Separators have
role="separator"and anaria-orientationmatching their visual direction. - They are not focusable or interactive. Do not use them to convey essential information.
Follows the WAI-ARIA guidance for separators in composite menus.