Buttons

Buttons allow users to perform actions.

Primary and Secondary Examples


Sizes

Most Buttons are available in four sizes: extra small, small, medium and large.

When to Use

  • The default button size (medium) will be used in most cases, but there may be a need for smaller or larger buttons. For example, an extra small button may be needed to fit into a table, while a large button may appear on a hero banner or marketing scenario.

Variations

Usage

Button Labels

Buttons labels should always be clear. To ensure clarity, use all caps for button labels. Always use clear, concise wording. See Voice and Tone for additional guidance. It is best to use action-oriented words that accurately set users’ expectations.

Placement and Positioning

Primary calls to action appear in the bottom right on desktop/tablet. On mobile, they may appear on the bottom right or they may span the full width. If there are multiple buttons on a mobile screen, the primary action should appear in the top-most position.

Secondary actions appear to the left of the primary action on desktop. On mobile, they may appear to the left or below the primary action. In addition, irreversible functions (“Cancel”) should appear on the far left, while non-destructive functions (“Save”) should appear next to the primary action.

If the action will continue a flow or go to a new screen, the button should be on the right.

If there is only one action and it will take the user back to a previous screen, the button should be on the left.

If the action will load additional items at the bottom of a list (“Load more”) then it should be centered.

Variations

Brand Button


When to Use

  • Use a brand button for large banners and marketing contexts.

When Not to Use

  • Do not use in the context of applications.

Primary Action Button

When to Use

  • Use a primary action button to indicate the desired or next likely action the user will take. Limit use to a single button on a screen or within a panel.

Secondary Button

When to Use

  • Use a secondary button for non-primary actions.

Negative Button

When to Use

  • Buttons with a negative or critical action should use the negative button style to convey a clear sense of the action’s ramifications. For example: deleting data

When Not to Use

  • Do not use the negative style with positive or neutral actions or to make an action more prominent.

Text-Only Button

The text-only button style is a button without a border or a background that inherits the primary action color.


When to Use

  • Use for secondary or tertiary actions that do not require the prominence of a button treatment.

When Not to Use

  • Do not use the text-only button in close proximity to other content, as users could have a difficult time finding it.

Additional Guidelines

If there are multiple text-only buttons, there should be plenty of space to separate them. These buttons contain padding, and in some instances it may make more sense to use an <a> tag instead.

Icon Button

A button can also be used as an icon without text. An icon-only button should always have a tooltip hint with the action of the button.


When to Use

  • Use icon-only buttons when space is at a premium.
  • Use icon-only buttons when the icon is clear and self-explanatory such as an “x” icon to denote a close action.
  • Icons can also include supporting text. The icon should always precede any text.

Loading Indication

If a button’s action requires any wait time before completion, a loading or processing indicator can be displayed. This should be preferred to a full-screen loading overlay. Note that this would require other considerations to prevent changes being made, such as disabling form inputs or other buttons.

Once the action is complete, the loading indication should be removed from the button.



When to Use

  • Use a loading indicator to provide quick feedback when the user takes action.

Additional Guidelines

Do not mix sizes of buttons that are located next to one another. If differentiation is needed, utilize the primary, secondary and text button styles.


Do not use the full-width style for large sections.


Developer Notes

Brand Button

<button class="spark-btn spark-btn--lg spark-btn--brand">Default</button>

Add a class of .spark-btn--brand and .spark-btn--lg to create a large, branded button.

Default Button

<button class="spark-btn spark-btn--md">Default</button>

The styling of a primary button will be present on any button that has a class of .spark-btn and no additional classes like .spark-btn--secondary.

Sizes

<div class="row">
  <div class="col-xs-12 spark-margin-bottom--lg">
    <button class="spark-btn spark-btn--lg">Large</button>
    <button class="spark-btn spark-btn--lg spark-btn--secondary">Large</button>
  </div>
  <div class="col-xs-12 spark-margin-bottom--lg">
    <button class="spark-btn spark-btn--md">Medium</button>
    <button class="spark-btn spark-btn--md spark-btn--secondary">Medium</button>
  </div>
  <div class="col-xs-12 spark-margin-bottom--lg">
    <button class="spark-btn spark-btn--sm">Small</button>
    <button class="spark-btn spark-btn--sm spark-btn--secondary">Small</button>
  </div>
  <div class="col-xs-12">
    <button class="spark-btn spark-btn--xs">Extra Small</button>
    <button class="spark-btn spark-btn--xs spark-btn--secondary">Extra Small</button>
  </div>
</div>

To render a large, medium, small or extra small button, apply a class of .spark-btn--lg, .spark-btn--md, .spark-btn--sm or .spark-btn--xs respectively.

Secondary Button

<button class="spark-btn spark-btn--md spark-btn--secondary">Secondary</button>

Add the .spark-btn--secondary class to a button to mark it as a secondary action within a section of the application.

Negative Button

<button class="spark-btn spark-btn--sm spark-btn--negative">Negative</button>

Icon Button

<button class="spark-btn--icon spark-icon spark-icon-airplane" title="Airplane"></button>
<button class="spark-btn--icon spark-icon spark-icon-airplane focus" title="Airplane"></button>
<button class="spark-btn--icon spark-icon spark-icon-airplane hover" title="Airplane"></button>
<button class="spark-btn--icon spark-icon spark-icon-airplane active" title="Airplane"></button>
<button class="spark-btn--icon spark-icon spark-icon-airplane" disabled title="Airplane"></button>

Loading Indication

<button class="spark-btn spark-btn--sm spark-progress">
  <progress></progress>
  <span class="spark-progress__meter"></span>
  Loading
</button>
<button class="spark-btn spark-btn--sm spark-btn--secondary spark-progress">
  <progress></progress>
  <span class="spark-progress__meter"></span>
  Loading
</button>
<label class="spark-input">
    <input class="spark-input__field" type="email" name="example1" placeholder="you@address.com" value="sdf@.com" required disabled role="textbox">
    <span class="spark-label">What is your email?</span>
    <span class="spark-input__message">Invalid email format.</span>
  </label>
<div class="spark-margin-top--lg spark-margin-bottom--lg">
  <button class="spark-pull-right spark-btn spark-btn--sm spark-progress">
    <progress></progress>
    <span class="spark-progress__meter"></span>
    Submit
  </button>
</div>

Anchor Tag

All button classes can safely be applied to <a> elements as well. In some instances a <button> may not make sense for functional reasons.