Separator
A line between two things.
Default
One line under a heading, and three between links in a row.
philcn
A component library, written by hand.
DocsSourcenpm
Horizontal by default, vertical when the things sit side by side. A separator that is only there for the eye should say so, and then screen readers skip it.
Installation
npx philcn@latest add separatorThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| Separator.orientation | "horizontal" | "vertical" | Horizontal or vertical. |
| Separator.decorative | boolean | True when the line is only for the eye: it is then hidden from screen readers. False when it really separates two sections, and it is announced as a divider. |
Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <div>.
Worth knowing
- A vertical separator takes its height from the row around it, so give that row a height — `h-5` in the example.