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.

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@sm 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

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>

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; } }

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>