Standard
Six variants across all interaction states
<button class="nds-btn nds-primary">
<span class="nds-label">Button</span>
</button>
Destructive
Red-toned variants for delete, remove, and irreversible actions
<button class="nds-btn nds-primary nds-destructive">
<span class="nds-label">Delete</span>
</button>
Layout
Content visibility, icon position, shape, and state modifiers
<button class="nds-btn nds-primary">
<i class="nds-icon nds-hgi-plus-sign" aria-hidden="true"></i>
<span class="nds-label">Add Item</span>
</button>
Menu Button
Dropdown trigger with auto-rotating indicator
Button Group
Grouped buttons with merged borders and shared border radius
<div class="nds-btn-group">
<button class="nds-btn nds-secondary-outline nds-lg"><span class="nds-label">Left</span></button>
<button class="nds-btn nds-secondary-outline nds-lg"><span class="nds-label">Center</span></button>
<button class="nds-btn nds-secondary-outline nds-lg"><span class="nds-label">Right</span></button>
</div>
Animated Progress
Circular countdown timer controlled by --progress-duration
Static Progress
Fixed percentage indicator controlled by --progress-value
Status Feedback
Contextual color and icon change via data-status attribute
<button class="nds-btn nds-secondary">
<i class="nds-icon nds-hgi-copy-01"></i>
<span class="nds-label">Copy Link</span>
</button>
// Set status with auto-reset after 2 seconds
function copyAction(button) {
button.dataset.status = 'success';
setTimeout(() => delete button.dataset.status, 2000);
}
const btn = document.querySelector('.nds-btn');
btn.addEventListener('click', () => copyAction(btn));
Badge
Notification count overlay on icon buttons
<button class="nds-btn nds-icon-only nds-subtle">
<i class="hgi hgi-stroke hgi-notification-03">
<span class="nds-badge">3</span>
</i>
</button>
Built-in Features
No JavaScript required. All variants, sizes, and states render from HTML markup with design tokens.
Primary, neutral, secondary, secondary-outline, subtle, and transparent with full state coverage.
24px to 40px. Font, icon, and indicator scale proportionally.
Lead icon, trail icon, icon-only, label-only, circular, full-width, and loading state.
High contrast borders, reduced motion fallback, print styles, and focus-visible ring.
Combine with destructive, on-color, loading, progress, status, badge, indicator, and groups.
Usage Guidelines
When to Use
- Use primary for the main action on the page. Limit to one per view
- Use neutral for strong secondary actions that need visual weight
- Use secondary/outline for supporting actions alongside a primary button
- Use subtle/transparent for low-emphasis actions like cancel, dismiss, or tertiary options
- Use destructive for delete, remove, or irreversible actions. Pair with a confirmation dialog
- Use on-color variants when placing buttons on colored or dark backgrounds
- Use icon-only for toolbar actions where space is limited. Always include aria-label
- Use loading state after a click to indicate processing. Disable the button to prevent double submissions