Skip to Main Content

This the final Part of a 3-Part series. You can also check out Part 1 - Setting Up Your Environment and Part 2 - Installation.

Part 3: Adding Spark Components in an HTML Project

This guide will cover how to add components for HTML, CSS and JavaScript.

Our Starter Github Repositories are also available for reference:

For instructions on setting up Spark in other environments, check out the guides for Angular and React.

Adding Your First Spark Component

Adding a Spinner Button can confirm you've installed Spark's Styles and JavaScript correctly.

This is just one example to implement functionality and get your project started.

  1. Add Spark Button code into your index.html and include an onclick and a data-id.
  <button
    class="sprk-c-Button"
    data-id="button-spinner-1"
    onclick="startSpinner()"
  >
    Start Spinning
  </button>

Note: Inside the <body> tag of index.html, the line <script src="main.js"></script> should be after any other HTML elements.

  1. In the index.js file, import setSpinning from Spark and create a startSpinner function (this is the function that will run onclick).
import { setSpinning } from '@sparkdesignsystem/spark';
window.startSpinner = () => {
  const spinningButton = document.querySelector('[data-id="button-spinner-1"]');
  setSpinning(spinningButton, {});
}
  1. Build your app with npm run build, and you should find a Spark Button that loads a Spinner on click.
A Spark Button Spinner component.

Learn more about Buttons and Spinner functionality in the Button Storybook documentation.

Finding the code to other Spark Components

  1. Go to the Spark HTML Storybook
  2. Find the Component you need in the "Components" section.
  3. Navigate to the Docs tab. It's typically at the top of screen next to Canvas.
  4. Navigate down the page until you find your component variant.
  5. The Show code button will toggle a code sample.

These code samples represent the rendered state after Spark's JavaScript functions run. Some functionality requires additional engineering.

The Docs section of each page will give implementation details for each component.

Additional Topics