Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.
<div nve-layout="row align:center">
<nve-pulse aria-label="pulse component"></nve-pulse>
</div>
Installation
<script type="module">
import '@nvidia-elements/core/pulse/define.js';
</script>
<div nve-layout="row align:center">
<nve-pulse aria-label="pulse component"></nve-pulse>
</div>
Status
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description accent Highlights important actions or draws attention to primary interactive elements. warning Indicates cautionary actions that require careful consideration before proceeding. danger Signals destructive or irreversible actions that need extra attention and confirmation.
Pulse status variants for different severity levels. Use accent for highlights, warning for caution states, and danger for critical alerts.
<div nve-layout="row gap:sm pad:md">
<nve-pulse></nve-pulse>
<nve-pulse status="accent"></nve-pulse>
<nve-pulse status="warning"></nve-pulse>
<nve-pulse status="danger"></nve-pulse>
</div>
Size
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts. xs
Pulse size variants from extra-small to large. Choose sizes based on context—smaller for inline indicators, larger for prominent status displays.
<div nve-layout="row align:center">
<nve-pulse size="xs"></nve-pulse>
<nve-pulse size="sm"></nve-pulse>
<nve-pulse size="md"></nve-pulse>
<nve-pulse size="lg"></nve-pulse>
</div>
Inline
Pulse used inline with text labels. Ideal for status indicators in lists, tables, or headers to show real-time or live states.
<div nve-layout="row gap:xs align:center">
<nve-pulse status="danger"></nve-pulse>
Live Status
</div>
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