Buttons

HEADS UP! Toggle Light Mode!

This page is best viewed in light mode, dark mode is not supported yet in the original NDS Design System.

Live Example

View the live example in a new tab.

Styles

Button Styles

<!-- Brand Colors -->
<button class="btn btn--primary-brand btn--md">Primary Brand</button>
<button class="btn btn--primary-neutral btn--md">Primary Neutral</button>

<!-- Secondary Colors -->
<button class="btn btn--secondary btn--md">Secondary Solid</button>
<button class="btn btn--secondary-outline  btn--md">Secondary Outline</button>

<!-- Extra Colors -->
<button class="btn btn--subtle-on-color  btn--md">Subtle</button>

<!-- Destructive Buttons -->
<button class="btn btn--des-primary btn--md">Destructive Primary</button>
<button class="btn btn--des-secondary btn--md">Destructive Secondary</button>
<button class="btn btn--des-secondary-outline btn--md">Destructive Outline</button>
<button class="btn btn--des-subtle btn--md">Destructive Subtle</button>
<button class="btn btn--des-transparent btn--md">Destructive Transparent</button>

Sizes

<button class="btn btn--primary-brand btn--lg">Large Primary Brand</button>
<button class="btn btn--primary-brand btn--md">Medium Primary Brand</button>
<button class="btn btn--primary-brand btn--sm">Small Primary Brand</button>

---

Button with Icons

Using Icons with Buttons

We use Google's Material Icons for our button icons. These can be implemented in two ways:

1. As a font: Include the Material Icons font in your project and use the icon names as text within <span> elements.

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <button class="btn btn--primary-brand btn--md">
     <span class="material-icons">add</span>
     Add Item
   </button>

2. As SVG: Copy the SVG code directly from the Material Icons website and paste it into your HTML.

   <button class="btn btn--primary-brand btn--md">
     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
       <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
     </svg>
     Add Item
   </button>

Choose the method that best fits your project's needs and performance requirements.

Icon Position

Icon Position

<!-- Icon Before Text -->
<button class="btn btn--primary-brand btn--lg">
    <span class="material-icons">add</span>
    Add Item
</button>

<!-- Icon After Text -->
<button class="btn btn--primary-brand btn--md">
    Next Step
    <span class="material-icons">arrow_forward</span>
</button>

Loading Buttons

Icon Spin Classes

Two classes can be used to add spinning animations to icons:

• icon-spin: Spins the icon clockwise
• icon-spin-ccw: Spins the icon counter-clockwise

Example usage:

<span class="material-icons icon-spin">sync</span>
<span class="material-icons icon-spin-ccw">autorenew</span>

Loading State

<!-- Loading Buttons -->
<button class="btn btn--primary-brand btn--lg btn--loading">
    <span class="material-icons spin-icon">autorenew</span>
    Loading...
</button>

<button class="btn btn--secondary btn--lg btn--loading">
    <span class="material-icons spin-icon-ccw">sync</span>
    Processing...
</button>

Icon-Only Buttons

Icon-Only Buttons

<!-- Icon-Only Buttons -->
<button class="btn btn--primary-brand btn--lg btn--icon-only" aria-label="Add item">
    <span class="material-icons">add</span>
</button>

<button class="btn btn--secondary btn--md btn--icon-only" aria-label="Edit">
    <span class="material-icons">edit</span>
</button>

<button class="btn btn--des-primary btn--lg btn--icon-only" aria-label="delete">
    <span class="material-icons">delete</span>
</button>

Important

Each button must have 3 classes: btn, btn--style, and btn--size.