Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Buttons

Code Examples

Spark-Core

Buttons are points of interaction for a website. A user is trained to activate a Button in order to perform an action. The Button component consists of a clickable container with descriptive text inside.

Information

  • Buttons make use of Large Inset Short spacing.

Restrictions

  • Do not use icons within Buttons.
  • Do not use <input type="submit"> for submit Buttons, use "button" instead.
  • If your button is not a submit button then use the type="button" attribute.
  • Do not exceed 280px in width for a single Button.
  • Button content should not wrap to two lines.
  • A button HTML element should be used when doing an action that doesn't have a meaningful URL.
  • An anchor HTML element should be used when you want the look of a Button but are linking to a URL.
  • If your Button is disabled, or becomes disabled, then add the disabled attribute.

Primary

Primary Buttons should only have a single action for the user to take and in most cases there should only be one Primary Button on any given page. 

<button class="sprk-c-Button">
  Button
</button>
          
<button sprkButton>Button</button>

Information

See below for available customization options:

Input Type Description
additionalClasses string Expects a space-separated string of class names that will be appended to the class attribute of sprk-button.

Secondary

When there is more then one action within a single view, Secondary Buttons can be a good option to allow the user to take another action other than the Primary. Use this when a secondary action is required that is relevant to the whole page (think of a print page or a share action). 

<button class="sprk-c-Button sprk-c-Button--secondary" type="button">
  Button
</button>
          
<button additionalClasses="sprk-c-Button--secondary" sprkButton>Button</button>

Information

All the customization options that are available for the primary variant are available for the secondary variant.

Tertiary

Use a Tertiary Button when there is an action that the user is required to complete that is separate from the primary action. 

<button class="sprk-c-Button sprk-c-Button--tertiary">
  Button
</button>
          
<button additionalClasses="sprk-c-Button--tertiary" sprkButton>Button</button>

Information

All the customization options that are available for the primary variant are available for the tertiary variant.

Remove

Remove Buttons indicate that something can be removed. Use a Remove Button when a user has the ability to remove something. 

<button class="sprk-c-Button sprk-c-Button--removal" type="button">
  Button
</button>
          
<button additionalClasses="sprk-c-Button--removal" sprkButton>Button</button>

Information

All the customization options that are available for the primary variant are available for the removal variant.

Disabled

Use a Disabled Button when an action is unavailable to the user. The Disabled styles can be applied to all Spark buttons. It's important to add the `disabled` attribute in addition to the `sprk-is-Disabled` class to indicate that the button should not receive focus. 

<button class="sprk-c-Button sprk-is-Disabled" disabled>
  Button
</button>
          
<button disabled sprkButton>Button</button>

Submission Spinner

Use the Spinner component on any Button that is being used to save or submit data.

Information

  • In a time out scenario show an Alert to the user with clear content and instruction.
  • When the Button is clicked the text is replaced by the Spark Spinner.
  • The Button's width needs to stay the same when the text is removed and the Spinner is applied.
<button class="sprk-c-Button" data-sprk-spinner="click">
  Submit
</button>
          
<button (click)="checkSpinner($event)" sprkButton>Button</button>

checkSpinner(event): void { if (!this.submitSpinning) { setSpinning(event.target, {}); this.submitSpinning = true; } }

Full Width at Small Viewport

Use for a full width button on small screens that returns to normal width at large screens. 

<button class="sprk-c-Button sprk-c-Button--full@sm" type="button">
  Button
</button>
          
<button additionalClasses="sprk-c-Button--full@sm" sprkButton>Button</button>
sparkdesignsystem@quickenloans.com