Separator
Separator
Visually or semantically separates content.
Horizontal
Default separator spanning the full width.
NeoUI
A Blazor UI component library
Components
Pre-built, production-ready components
Vertical
Separator for horizontally arranged content.
Button
Input
Badge
Separator
Decorative vs Semantic
Control ARIA attributes for accessibility.
Decorative (Default)
role="none" - Hidden from screen readers
Section 1
Section 2
Semantic
role="separator" - Announced to screen readers
Settings
Privacy
Custom Styling
Override styles with the Class parameter.
Default separator
Thicker separator
Colored separator
Dashed separator
In Lists
Separating list items or menu options.
Profile Settings
Manage your account
Preferences
Customize your experience
Notifications
Configure alerts
Security
Password and authentication
Dashed and Dotted
Use LineStyle to render dashed or dotted separators for visual variety.
Solid (default)
Dashed
Dotted
Solid
Dashed
Dotted
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Orientation | SeparatorOrientation | Horizontal | The orientation of the separator. Options: Horizontal, Vertical. |
| LineStyle | SeparatorStyle | Solid | Visual line style. Options: Solid, Dashed, Dotted. |
| Decorative | bool | true | When true, the separator is purely decorative and hidden from screen readers. Set to false for semantic separators. |
| Class | string? | — | Additional CSS classes appended to the separator element. |