Separator
Dividers. Free, MIT · Basics › Labels and tooltips
Installation
npx valyro-cli@latest add separator
npx shadcn@latest add https://valyro.xyz/r/separator.json
npm install valyro-ui
import 'valyro-ui/styles.css';
import { Separator } from 'valyro-ui';
Props
| Prop | Type | Default | |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Horizontal rule across the container, or a vertical line stretched to the row height. |
label | ReactNode | Text in the middle, e.g. "OR". Horizontal only. | |
decorative | boolean | true | Purely visual (default) — hidden from assistive tech. |
Related components
- Badge — Status labels and tags
- Avatar — User avatars
- Tooltip — Hover and focus hints
- Button — Buttons in every variant
- Icon Button — Icon-only button
- Button Group — Grouped buttons
- Copy to Clipboard — Copy with confirmation
- Skeleton — Loading placeholders
- Spinner — Loading indicator
- Progress Bar — Progress bars
Previous: Tooltip · Next: Skeleton · All Basics