Buttons

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>

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>

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>

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>

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>

Submission Spinner

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

<button class="sprk-c-Button" data-sprk-spinner="click">
  Submit
</button>

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>