Divider is a component that separates and distinguishes sections of content or groups of menuitems.
<nve-divider></nve-divider>
Installation
<script type="module">
import '@nvidia-elements/core/divider/define.js';
</script>
<nve-divider></nve-divider>
Emphasis
Divider with emphasis color styling for stronger visual separation between content sections.
<nve-divider style="--color: var(--nve-ref-border-color-emphasis)"></nve-divider>
Muted
Divider with muted color styling for subtle, low-contrast separation in dense layouts.
<nve-divider style="--color: var(--nve-ref-border-color-muted)"></nve-divider>
Vertical
Vertical divider for separating horizontally arranged elements like toolbar buttons or inline actions.
<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>
Rounded
Divider with custom rounded styling, thicker border, and accent color for decorative separation.
<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>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days