Separator
A one-pixel rule that divides content horizontally or vertically, with a decorative mode that hides it from assistive tech.
A one-pixel rule that divides content, horizontally or vertically.
Import
1import { Separator } from "@yuhuanowo/yunui";Orientation
A horizontal separator stretches to the width of its container. A vertical one stretches to the height of its container, so it needs a parent with a resolved height — a flex row with a set height, or items-stretch.
Horizontal
Account
Billing
Vertical
Accessibility
By default the rule is exposed as role="separator", which is right when it marks a genuine section boundary. Set decorative when the line is only visual and the structure is already conveyed some other way — that removes it from the accessibility tree so a screen reader does not announce a divider that means nothing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| decorative | boolean | false | Purely decorative — no semantic role announced to assistive tech. |
| orientation | "horizontal" | "vertical" | horizontal |