Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Separator
A headless separator primitive that renders a semantic divider with proper ARIA roles. Supports decorative and semantic modes.
Horizontal Decorative
A horizontal decorative separator between content sections. By default,
Decorative is true, which renders role="none" to hide it from assistive technology.
Loading example…
Vertical
A vertical separator between inline items using a flex layout. Set
Orientation to SeparatorOrientation.Vertical.
Loading example…
Semantic Separator
A semantic separator with
Decorative="false". This renders role="separator" with aria-orientation, making it meaningful to assistive technology for navigation landmarks.
Loading example…
Card Layout
Separators used within a card-like layout to divide header, content, and footer sections.
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-orientation="horizontal"]- When orientation is horizontal[data-orientation="vertical"]- When orientation is vertical