Buttons

Code Examples

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 the Large Inset Short spacing but there is a modifier available to reduce the spacing (.sprk-c-Button--compact).

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.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("button-primary-1", "button-primary-2", "button-tertiary-1", etc).

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" data-id="button-1">
  Button
</button>
          
<button data-id="button-1" sprkButton>Button</button>

Information

See below for available customization options:

Input Type Description
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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" data-id="button-1">
  Button
</button>
          
<button class="sprk-c-Button--secondary" data-id="button-1" 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" data-id="button-1">
  Button
</button>
          
<button class="sprk-c-Button--tertiary" data-id="button-1" sprkButton>Button</button>

Information

All the customization options that are available for the primary variant are available for the tertiary 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" data-id="button-1" disabled>
  Button
</button>
          
<button disabled data-id="button-1" 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" data-id="button-spinner-1">
  Submit
</button>
          
<button (click)="checkSpinner($event)" data-id="button-1" 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" data-id="button-1">
  Button
</button>
          
<button class="sprk-c-Button--full@sm" data-id="button-1" sprkButton>Button</button>

Full Width at Extra Small Viewport

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

<button class="sprk-c-Button sprk-c-Button--full@xs" type="button" data-id="button-1">
  Button
</button>
          
<button data-id="button-1" sprkButton>Button</button>