Skip Navigation

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.

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>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

Icon Button

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip" aria-label="Settings" aria-expanded="false" aria-describedby="tooltip1">
  <span id="tooltip1" class="spark-tooltip__content--left" role="tooltip">
    Change your settings
    <span class="spark-tooltip__caret"></span>
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip focus" aria-label="Settings" aria-expanded="false" aria-describedby="tooltip2">
  <span id="tooltip2" class="spark-tooltip__content--top" role="tooltip">
    Change your settings
    <span class="spark-tooltip__caret"></span>
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip hover" aria-label="Settings" aria-expanded="false" aria-describedby="tooltip3">
  <span id="tooltip3" class="spark-tooltip__content--bottom" role="tooltip">
    Change your settings
    <span class="spark-tooltip__caret"></span>
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon--fill spark-icon-cog spark-tooltip active" aria-label="Settings" aria-expanded="false" aria-describedby="tooltip4">
  <span id="tooltip4" class="spark-tooltip__content--right" role="tooltip">
    Change your settings
    <span class="spark-tooltip__caret"></span>
  </span>
</button>

<button class="spark-btn--icon spark-icon spark-icon-cog spark-tooltip" disabled aria-label="Settings" aria-expanded="false" aria-describedby="tooltip5">
  <span id="tooltip5" class="spark-tooltip__content--right" role="tooltip">
    Change your settings
    <span class="spark-tooltip__caret"></span>
  </span>
</button>

<style type="text/css">
  
</style>

To display the filled version of the icon in the active state, a class of spark-icon--fill has to be added to the button. For pages loaded using ajax, custom logic might be required within the application to manage the toggling of active states for different buttons.

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>

<style type="text/css">
  
</style>
<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-btn-group spark-margin-top--lg spark-margin-bottom--lg">
  <button class="spark-btn spark-btn--sm spark-progress">
    <progress></progress>
    <span class="spark-progress__meter"></span>
    Submit
  </button>
</div>

<style type="text/css">
  
</style>

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.

Disabled Button

<button class="spark-btn spark-btn--md" disabled>Disabled</button>

Adding the disabled attribute to the button element will style the button accordingly.

Accessibility Notes

Text-Only Button

The Text-Only Button has been designed to be fully accessible in terms of Color Contrast when used on a white background (#FFFFFF) or the light gray (#EEEEEE) typically used within Spark components. If you need to place the button on the darker gray background typically used for the page background (#E4E4E4), you will need to add custom CSS to update the default color of the button to #1F7261. This color is included in the SCSS color variables within Spark. The hover and focus states will remain the same and will not need to be customized.

If using a background color that is not one of the above, the Text-Only button may fail the contrast checker test and you will need to evaluate what changes are needed to ensure the Text-Only Button meets the Accessibility and Color Contrast standards defined and used within Spark.

Icon Buttons

For more information on how to make Icon Buttons accessible, refer to the Tooltips accessibility documentation.