Element

Button

SCSS Location: /styles/scss/partial/_buttons.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

Universal CTA element treatment used across the entire site for most presentational Link and Button display.

Included are modifiers for existing .btn class to display a different color button treatment.

Guidelines

  • Use all caps for button labels.
  • Use primary buttons for the most important action on the page.
  • Add an icon to signal to a specific action (download, play, etc.).

Usage

The .btn class can be applied to both button and link (a) elements that need a Button treatment.

The existing .btn class will still be applied to both button and link (a) elements that need a Button treatment, but you add the modifier class to make it a different treatment.

Primary Base Button (Link) Primary Base Button (Link) (Icon) Primary Dark Button (Link) Primary Dark Button (Link) (Icon) Knockout Button (Link) Knockout Button (Link) (Icon) Knockout Button (Link) Knockout Button (Link) (Icon)