Divider
- Status
- Stable
- Accessibility
- Reviewed
- Package
tenet-ui@0.5.0- Source
- Divider.tsx
import { Divider } from 'tenet-ui';Also accepts every prop of HTMLAttributes<HTMLDivElement>.
Usage guidelines
Section titled “Usage guidelines”When to use: a thin rule that separates content groups — sections of a menu, columns in a toolbar, an “or” between two choices.
- It renders
role="separator"with the correctaria-orientation, so it’s a real separator, not a decorative border. Use it instead of a styled<hr>or a bordered<div>. - Use a labelled horizontal divider (“or”) to split alternative actions; keep the label one or two words.
- Vertical dividers need a flex parent with a height to stretch against.
- Don’t stack dividers to fake spacing — reach for
Stackgaps for layout and a divider only when a visible rule communicates a boundary.
Do / Don’t
Section titled “Do / Don’t”- ✅
<Divider />·<Divider>or</Divider> - ✅
<Stack direction="horizontal"><span>A</span><Divider orientation="vertical" /><span>B</span></Stack> - ❌
<hr style={{opacity:.2}} />— off-system thickness/color.
Examples
Section titled “Examples”3 stories for Divider, open in Storybook
- Horizontal
components-divider--horizontal - Labelled
components-divider--labelled - Vertical
components-divider--vertical
The full matrix (all args, controls, accessibility panel) is in Storybook.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical'DividerOrientation | horizontal | Layout direction. |
children | ReactNode | None | Optional centered label (horizontal only). |