Divider
A semantic boundary with logical orientation, aligned plain or projected content, three line treatments and complete visual ownership.
GET STARTED
Import
Import the canonical standalone declaration from its granular entry point.
Basic separator
The empty form creates a quiet horizontal content boundary.
Workspace overview
Agent activity
Content and alignment
label handles plain text. Start and end are logical, so they mirror automatically in RTL.
Line types
Solid, dashed and dotted variants share the same semantics and token scale.
Vertical orientation
A vertical divider stretches with its parent and reports the matching ARIA orientation.
Rich projection
Project icons and markup when a plain label is not expressive enough. Providing label always takes precedence.
Unstyled and typed slots
Headless mode retains structural orientation and separator semantics while every visual choice moves to consumer classes.
Beta boundary
ACCESSIBILITY
Separator semantics
The visual boundary is backed by an explicit, non-interactive ARIA separator contract.
Separator semantics
The root always renders role="separator". Decorative line segments are hidden from assistive technology.
Orientation
aria-orientation always matches the visual orientation input.
Accessible names
Use ariaLabel or ariaLabelledBy only when the boundary needs a name. The ID reference takes precedence.
Keyboard
Static dividers are not focusable and define no keyboard commands. Use a splitter component for adjustable regions.
RTL
Logical borders, margins and start/end alignment mirror with document direction without JavaScript.
PUBLIC API
Divider contract
NeuralDivider is the canonical standalone declaration.
Inputs
| Name | Type | Default | Purpose |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Logical layout and ARIA orientation. |
align | 'start' | 'center' | 'end' | 'center' | Positions content using logical edges. |
type | 'solid' | 'dashed' | 'dotted' | 'solid' | Visual line style. |
label | string | null | null | Plain text; overrides projection. |
ariaLabel | string | null | null | Direct accessible name. |
ariaLabelledBy | string | null | null | ID reference; takes precedence over ariaLabel. |
unstyled | boolean | false | Removes NeuralNg visual classes. |
dividerClass | string | '' | Additive class on the separator root. |
classes | NeuralDividerClasses | {} | Typed additive class slots. |
Class slots
rootThe element carrying role="separator".
beforeLogical line before projected or label content.
contentLabel or projected content wrapper.
afterLogical line after projected or label content.
Types
NeuralDividerOrientation'horizontal' | 'vertical'
NeuralDividerAlign'start' | 'center' | 'end'
NeuralDividerType'solid' | 'dashed' | 'dotted'
NeuralDividerClasses{ root?, before?, content?, after? }
Deprecated alias
DividerComponent remains only as a compatibility alias. New code and generated AI output must use NeuralDivider.
DESIGN TOKENS
Divider tokens
Neutral supplies the reference values. Glass and Futuristic override the same stable token contract.
Line tokens
--neural-divider-colorComponent foreground color.
--neural-divider-widthComponent inline size.
Content tokens
--neural-divider-content-colorContent foreground color.
--neural-divider-font-familyComponent font family.
--neural-divider-font-sizeComponent font size.
--neural-divider-font-weightComponent font weight.
--neural-divider-line-heightComponent line height.
--neural-divider-content-gapSpacing between content items.
Layout tokens
--neural-divider-margin-blockComponent logical block-axis margin.
--neural-divider-margin-inlineComponent logical inline-axis margin.
--neural-divider-edge-sizeMinimum line length retained on each side of centered divider content.
--neural-divider-vertical-min-heightVertical minimum block size.
--neural-divider-vertical-writing-modeVertical CSS writing mode.