Default
Separate a meaningful change in topic
A native Horizontal Rule communicates a thematic break to assistive technology.
Overview
Research direction
Start with the user problem and the decisions the work must support.
Next
Interface principles
Turn the strongest findings into repeatable product rules.
Emphasis
Match the strength of the boundary
Default supports ordinary separation. Strong marks a more significant change without becoming a decorative accent.
Spacing
Keep separation proportional to content
Compact fits dense settings, Default separates ordinary sections, and Spacious creates an editorial pause.
With label
Explain two equivalent paths
A short visible label can clarify a split between alternatives. The wrapper carries Separator semantics.
Vertical
Separate compact inline groups
Use Vertical Divider only when adjacent items already share one horizontal context.
Semantics
Expose structure only when it carries meaning
Use a native Horizontal Rule for a thematic break. Hide purely visual boundaries from assistive technology.
Semantic
Use <hr class="nds-divider" /> when the content changes topic.
Decorative
Use a neutral element with aria-hidden="true" for visual grouping only.
Usage guidance
Try spacing before adding a line.
Use Divider when space alone cannot communicate the relationship. Avoid repeated rules that fragment a simple page.
Next component: Avatar