Separator
A visual divider between sections of content. Supports horizontal and vertical orientations.
When to use
- Between sections in a sidebar, card, or page.
- Between items in a toolbar or menu.
- Vertical divider between inline elements.
When NOT to use
- For spacing alone — use margin or padding.
- For borders on containers — style the container directly.
Import
import { Separator } from '@mihcm/ui/Separator';Basic usage
<div>
<p>Section one</p>
<Separator />
<p>Section two</p>
</div>Props
| Prop | Default | Description |
|---|---|---|
orientation | "horizontal" | "horizontal" or "vertical". |
decorative | true | When true, hidden from the accessibility tree. |
Orientation
- Horizontal (default): a full-width 1px line.
- Vertical: a full-height 1px line. The parent must have a defined height.
Composition
- Set
decorative={false}when the separator conveys semantic meaning (e.g. between unrelated sections). This exposes it to screen readers asrole="separator". - Vertical separators need a parent with a defined height — they stretch to fill the parent.
- Use inside DropdownMenu, Card, or Sidebar to divide groups.
Related
- Card — often contains separators between sections.
- SectionHeader — heading that visually separates content groups.