Skip to main content

Buttons

Version: 0.9.0
Edit

Buttons are used to signal actions, submit forms, or trigger new content within the current context. Buttons can be grouped when multiple calls to action are available. If a primary call to action exists, that should lead the list and be styled accordingly.

Icons can be added to buttons if it improves usability and discoverability.

  • When to Use

    Asking the user to do something. Such as:

    • Submitting data on a form
    • Serving as a clear call to action for the user

  • When not to Use

    • When there is not a clear call to action; this is a text link
    • When there are multiple calls to action of equal weight; this is navigation
    • When linked text reaches an excessive amount
    • The button creates a dark pattern for the user

Default button

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L9

Button Link
Button Link
Button Link
Button Link 
<!-- button -->
<a class="c-button" href="#">Button Link</a>
<!-- button secondary -->
<a class="c-button c-button--secondary" href="#">Button Link</a>
<!-- button disabled -->
<a class="c-button c-button--disabled" href="#">Button Link</a>
<!-- button disabled secondary -->
<a class="c-button c-button--disabled c-button--secondary" href="#">Button Link</a>

Neutral Buttons

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L117

Button Link
Button Link
Button Link
Button Link 
<!-- button neutral -->
<a class="c-button c-button--neutral" href="#">Button Link</a>
<!-- button neutral secondary -->
<a class="c-button c-button--neutral c-button--secondary" href="#">Button Link</a>
<!-- button disabled neutral -->
<a class="c-button c-button--neutral c-button--disabled" href="#">Button Link</a>
<!-- button disabled neutral secondary -->
<a class="c-button c-button--neutral c-button--disabled c-button--secondary" href="#">Button Link</a>

On Dark buttons

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L224

Button Link
Button Link
Button Link
Button Link 
<!-- button on-dark -->
<a class="c-button c-button--on-dark" href="#">Button Link</a>
<!-- button on-dark secondary -->
<a class="c-button c-button--on-dark c-button--secondary" href="#">Button Link</a>
<!-- button disabled on dark -->
<a class="c-button c-button--on-dark c-button--disabled" href="#">Button Link</a>
<!-- button disabled on dark secondary -->
<a class="c-button c-button--on-dark c-button--disabled c-button--secondary" href="#">Button Link</a>

Button with Icon

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L334

Button Link 
<!-- button with icon -->
<a class="c-button c-button--icon" href="#">
  <span class="c-button__copy u-space-inline-right-compact">Button Link</span>
  <span class="c-button__icon icon-download" aria-hidden="true" focusable="false"><!--icon--></span>
</a>

Full-width Button

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L359

Button Link 
<!-- button full width -->
<a class="c-button c-button--full-width" href="#">Button Link</a>

Small Button

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L371

Button Link 
<!-- button small -->
<a class="c-button c-button--small" href="#">Button Link</a>

Large Button

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L384

Button Link 
<!-- button large -->
<a class="c-button c-button--large" href="#">Button Link</a>

Jumbo Button

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/buttons.scss#L397

Button Link 
<!-- button jumbo -->
<a class="c-button c-button--jumbo" href="#">Button Link</a>