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. When writing button copy, use active verbs like “create”, “join”, or “discover” to entice a client. Avoid vague labels like “learn more” or “get started.” Use consistent phrases throughout the experience. Clearly communicate what will happen when clients click the button. The character limit of the button copy depends on where it’s placed in the design. If the button(s) are not in a modal or dialogue box, each button can have up to approximately 20 characters or a maximum width of 280px. If the button(s) are in a modal or dialogue box, the character limit depends on the number of buttons. The modal design requires the buttons to be displayed side-by-side; therefore, the character limit for the entire line of buttons within the modal is approximately 20 characters. This means each button should be no more than six to eight characters depending on the number of each button and the length of the copy on the other buttons.

Information

  • Buttons make use of the 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.
  • 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).

Configurable Variables

Variable Default Description
$sprk-btn-background-color $sprk-green Sets the background color of the button.
$sprk-btn-shadow 0 3px 10px rgba(20,20,20,0.08) Sets the box-shadow of the button.
$sprk-btn-border-style solid Sets the style of the border.
$sprk-btn-border-color $sprk-btn-background-color Sets the border color. Default is set to match the background color.
$sprk-btn-border-width 2px Sets the width of the border.
$sprk-btn-font-weight 500 Sets the weight of the font.
$sprk-btn-text-color $sprk-white Sets the font color.
$sprk-btn-border-radius 4px Sets the border radius.
$sprk-btn-hover-background-color $sprk-green-dark Sets the background color on hover.
$sprk-btn-hover-text-color $sprk-white Sets the color of button text on hover.
$sprk-btn-padding $sprk-space-m 24px Sets the padding value.
$sprk-btn-breakpoint-xs 30rem Sets the extra small breakpoint used for full width buttons to become normal width.
$sprk-btn-breakpoint-s 42.5rem Sets the small breakpoint used for full width buttons to become normal width.
$sprk-btn-transition-speed 0.3s Sets the CSS transition speed.
$sprk-btn-letter-spacing 0.62px Sets the letter spacing.
$sprk-btn-disabled-opacity 1 Sets the opacity of the disabled button.
$sprk-btn-disabled-border-width $sprk-btn-border-width Sets the border width of the disabled button.
$sprk-btn-disabled-background-color $sprk-gray-dark Sets the background color of the disabled button.
$sprk-btn-disabled-text-color $sprk-white Sets the font color of the disabled button.
$sprk-btn-disabled-border-color transparent Sets the border color of the disabled button.
$sprk-btn-disabled-shadow none Sets the shadow of the disabled button.
$sprk-btn-secondary-disabled-background-color transparent Sets the background color of disabled secondary buttons.
$sprk-btn-secondary-disabled-text-color $sprk-gray-dark Sets the text color of disabled secondary buttons.
$sprk-btn-secondary-disabled-border-color $sprk-gray-dark Sets the border color of disabled secondary buttons.
$sprk-btn-secondary-disabled-shadow none Sets the shadow of disabled secondary buttons.
$sprk-btn-secondary-background-color $sprk-white Sets the background color of the secondary button.
$sprk-btn-secondary-border-color $sprk-gray-dark Sets the border color of the secondary button.
$sprk-btn-secondary-text-color $sprk-black Sets the font color of the secondary button.
$sprk-btn-secondary-hover-text-color $sprk-black Sets the hover state font color of the secondary button.
$sprk-btn-secondary-hover-background-color transparent Sets the hover state background color of the secondary button.
$sprk-btn-secondary-hover-border-color $sprk-gray-dark Sets the hover state border color of the secondary button.
$sprk-btn-secondary-hover-shadow 0 3px 10px rgba(20, 20, 20, 0.08) Sets the hover state shadow for secondary buttons.
$sprk-btn-secondary-letter-spacing 0.62px Sets the letter spacing of the secondary button.
$sprk-btn-tertiary-background-color transparent Sets the background color of the tertiary button.
$sprk-btn-tertiary-border-color none Sets the border color of the tertiary button.
$sprk-btn-tertiary-text-color $sprk-black Sets the font color and visited state font color of the tertiary button.
$sprk-btn-tertiary-underline-width 0.125em Sets the width of the underline for tertiary buttons.
$sprk-btn-tertiary-underline-padding-top 0.125em Sets the vertical distance between the underline and the text for tertiary buttons.
$sprk-btn-tertiary-underline-color $sprk-gray-dark Sets the color of the underline for tertiary buttons.
$sprk-btn-tertiary-hover-text-color $sprk-black Sets the hover state font color of the tertiary button.
$sprk-btn-tertiary-hover-underline-color $sprk-black Sets the hover state background color of the underline of the tertiary button.
$sprk-btn-tertiary-hover-background-color transparent Sets the hover state background color of the tertiary button.
$sprk-btn-tertiary-hover-shadow none Sets the hover state shadow of the tertiary button.
$sprk-btn-tertiary-disabled-shadow none Sets the shadow of disabled tertiary buttons.
$sprk-btn-tertiary-disabled-border none Sets the border of disabled tertiary buttons.
$sprk-btn-tertiary-disabled-background-color transparent Sets the background color of disabled tertiary buttons.
$sprk-btn-tertiary-disabled-text-color $sprk-gray-dark Sets the text color of disabled tertiary buttons.
$sprk-btn-tertiary-letter-spacing normal Sets the letter spacing of the tertiary button.

Class Modifiers

Class Description
.sprk-c-Button--compact Reduces the padding of the normal button to $space-inset-short-m.
.sprk-c-Button--full@xs Makes the button full width of its parent container until it flips to normal width at the $sprk-btn-breakpoint-xs breakpoint.
.sprk-c-Button--full@s Makes the button full width of its parent container until it flips to normal width at the $sprk-btn-breakpoint-s breakpoint.
.sprk-c-Button--secondary Styles the button as the secondary variant.
.sprk-c-Button--tertiary Styles the button as the tertiary variant.

Primary

Use a Primary button for the main action we want the user to take. Avoid using more than one Primary button per page. Please use title case for Primary buttons.

<button
 class="sprk-c-Button"
 data-id="button-1"
>
  Button
  </button>
          
<button
 data-id="button-1"
 sprkButton
>Button</button>
<SprkButton>Button</SprkButton>

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.

Information

See below for available customization options:

Prop Type Description
element string, node, function Determines what element is rendered. If an href is provided and an element is not, an anchor tag will be rendered. If no href or element is provided, it will default to a button.
href string If an href is provided and no element is provided, an anchor tag will be rendered. The actual value is what is applied to the href attribute.
additionalClasses string Expects a space separated list of classes to apply to the element.
disabled boolean Will apply disabled style and the disabled attribute to the element.
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.
analyticsString string The value supplied will be assigned to the 'data-analytics' attribute on the component.
loading boolean Will cause a spinner to be rendered in place of the button content.
variant string Expects 'primary', 'secondary', or 'tertiary'. Will render the cooresponding button variant.

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>
<SprkButton variant="secondary">Button</SprkButton>

Information

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

Information

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

Tertiary

Use Tertiary buttons to give users the option to navigate to a new page. Please note that in many cases, a link is preferable to a Tertiary button when guiding users to another page.

<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>
<SprkButton variant="tertiary">Button</SprkButton>

Information

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

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>
<SprkButton disabled>Button</SprkButton>

Disabled Secondary

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-c-Button--secondary sprk-is-Disabled"
 data-id="button-1"
 disabled
>
  Button
  </button>
          

Disabled Tertiary

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-c-Button--tertiary sprk-is-Disabled"
 data-id="button-1"
 disabled
>
  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; } }
<SprkButton loading>Button</SprkButton>

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@s"
 type="button"
 data-id="button-1"
>
  Button
  </button>
          
<button
 class="sprk-c-Button--full@s"
 data-id="button-1"
 sprkButton
>Button</button>
<SprkButton additionalClasses="sprk-c-Button--full@s">Button</SprkButton>

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>
<SprkButton additionalClasses="sprk-c-Button--full@xs">Button</SprkButton>