Button

Basic Button

This is a basic button with no additional modifiers.

Basic Button 
<button type="button" class="button">
  Basic Button
</button>

<a href="#" class="button">
  Basic Button
</a>

Dark Button

  • inprogress

This is like the basic button, but darker.

Dark Button 
<button type="button" class="button button-dark">
  Dark Button
</button>

<a href="#" class="button button-dark">
  Dark Button
</a>

Green Button

This is a green button. This should only ever be used for a Firefox download button.

Green Button 
<button type="button" class="button button-green">
  Green Button
</button>

<a href="#" class="button button-green">
  Green Button
</a>

Hollow Buttons

Some buttons are hollow, with a border and transparent background.

Hollow Button Hollow Red Button Hollow Dark Button 
<button type="button" class="button button-hollow">
  Hollow Button
</button>

<a href="#" class="button button-hollow">
  Hollow Button
</a>

<button type="button" class="button button-hollow button-red">
  Hollow Red Button
</button>

<a href="#" class="button button-hollow button-red">
  Hollow Red Button
</a>

<button type="button" class="button button-hollow button-dark">
  Hollow Dark Button
</button>

<a href="#" class="button button-hollow button-dark">
  Hollow Dark Button
</a>

Orange Button

  • inprogress

This is an orange button. I'm not sure if we ever use this, but we have a style defined for it.

Orange Button 
<button type="button" class="button button-orange">
  Orange Button
</button>

<a href="#" class="button button-orange">
  Orange Button
</a>

Red Button

  • inprogress

This is a red button. I'm not sure if we ever use this, but we have a style defined for it.

Red Button 
<button type="button" class="button button-red">
  Red Button
</button>

<a href="#" class="button button-red">
  Red Button
</a>