DefaultEmphasisMutedVerticalRounded
Divider is a component that separates and distinguishes sections of content or groups of menuitems.
<nve-divider style="--color: var(--nve-ref-border-color-emphasis)"></nve-divider>
Edit Example
Divider with emphasis color styling for stronger visual separation between content sections.
<nve-divider style="--color: var(--nve-ref-border-color-muted)"></nve-divider>
Edit Example
Divider with muted color styling for subtle, low-contrast separation in dense layouts.
<div nve-layout="row gap:sm align:vertical-center" style="height: 50px">
<nve-divider orientation="vertical"></nve-divider>
<nve-icon-button icon-name="information-circle-stroke"></nve-icon-button>
<nve-icon-button icon-name="more-actions"></nve-icon-button>
</div>
Edit Example
Vertical divider for separating horizontally arranged elements like toolbar buttons or inline actions.
<nve-divider
style="
--size: var(--nve-ref-border-width-xl);
--border-radius: var(--nve-ref-border-radius-xs);
--color: var(--nve-sys-accent-secondary-background);
"
></nve-divider>
Edit Example
Divider with custom rounded styling, thicker border, and accent color for decorative separation.