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



Primary (Link)

Primary-Icon



Primary (Icon, Link)

Secondary



Secondary (Link)

Secondary-Icon



Secondary (Icon, Link)

Tertiary



Tertiary (Link)

Tertiary-Icon



Tertiary (Icon, Link)

Quaternary (Solid Black)



Quaternary (Link)

Text



Text (Link)

Form Button Submission State

Search Icon Button