display
Separator
A horizontal or vertical divider that stays out of the accessibility tree.
Examples
Orientations
Decorative by default — it stays out of the accessibility tree unless you say the division is meaningful.
Signed in as ada@example.com
ProfileBillingTeam
or
Continue with a single sign-on provider
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Self-contained apart from @noksha-ui/core. Or let the CLI do it: npx @noksha-ui/cli add separator writes them, follows the same dependency graph, and fixes up the imports.
export { Separator, separatorVariants } from './separator.js';
export type { SeparatorOrientation, SeparatorProps } from './separator.types.js';API reference
Accepted values
- SeparatorOrientation
horizontalvertical
SeparatorProps
Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>.
| Prop | Type | Description |
|---|---|---|
| orientation | SeparatorOrientation | — |
| decorative | boolean | Purely visual — the rule carries no meaning a screen reader needs. Default is `true`, because most separators in a UI are decoration between things that are already grouped by other means. Set it to `false` for the rules that genuinely divide sections of content, where the boundary is part of the document's structure. |
| children | React.ReactNode | Optional label rendered inside the rule, as in "or". |