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>
<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>
<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>
nve api.get nve-pulse
nve api.get nve-pulse
Status
These visual treatments represent the status of different tasks. When status changes to accent, warning or danger, the component embeds appropriate colors.
Status Description accent warning danger 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>
<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
Sets size of the pulse component. You can also update size using the width + height css props.
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>
<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>
<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