Buttons

Overview

The button class mzp-c-button can be a applied to a button element, an input type="button" or an a element.

Button size and color themes can be combined as needed.

Button Button 
<button class="mzp-c-button mzp-t-md">
  Button
</button>

<a href="#" class="mzp-c-button mzp-t-secondary mzp-t-md">
  Button
</a>

<button class="mzp-c-button mzp-t-product mzp-t-lg">
  Button
</button>

<a href="#" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-lg">
  Button
</a>

<button class="mzp-c-button mzp-t-neutral">
  Button
</button>

Tips

  • Avoid using button styling for ordinary links that simply lead to another page. Buttons should typically trigger some specific action. Buttons do things; links go places.
  • That said, sometimes the action is to visit another page. A strong call to action might be a link styled as a button. Use them wisely.

Primary

This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page.

<button class="mzp-c-button">
  Call to Action
</button>

Primary (Dark)

This is a primary button displayed on a dark background. Add the class mzp-t-dark to change the button color from dark to light.

<button class="mzp-c-button mzp-t-dark">
  Call to Action
</button>

Secondary

This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action.

<button class="mzp-c-button mzp-t-secondary">
  Call to Action
</button>

Secondary (Dark)

This is a secondary button displayed on a dark background. Add the class mzp-t-dark to change the button color from dark to light.

<button class="mzp-c-button mzp-t-secondary mzp-t-dark">
  Call to Action
</button>

Product

Use this theme style for product related actions, such as downloading Firefox or signing up for a Firefox Account.

<button class="mzp-c-button mzp-t-product">
  Download Firefox
</button>

Product (Secondary)

This secondary button theme should be used when the CTA is not the main action a person should take on a page. An example of this can be seen in the Navigation organism.

<button class="mzp-c-button mzp-t-product mzp-t-secondary">
  Call to Action
</button>

Tips

  • Use this button theme for product related actions, such as downloading Firefox or signing up for a Firefox Account.

Neutral

This is a neutral button.

<button class="mzp-c-button mzp-t-neutral">
  Call to Action
</button>

Product (Secondary - Dark) 

<button
 class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">
  Call to Action
</button>

Neutral (Dark)

This is a neutral button with the dark theme.

<button class="mzp-c-button mzp-t-neutral mzp-t-dark">
  Call to Action
</button>

Sizes

Buttons can be 4 different sizes, if no size is declared they will be the large size.

<button class="mzp-c-button mzp-t-sm">
  Small Button
</button>

<button class="mzp-c-button mzp-t-md">
  Medium Button
</button>

<button class="mzp-c-button mzp-t-lg">
  Large Button
</button>

<button class="mzp-c-button mzp-t-xl">
  Extra Large Button
</button>

Disabled

This is an example of a disabled button. The disabled property is added on submit to prevents people from submitting their information twice by mistake while submitting a form.

<button class="mzp-c-button" disabled>
  Submit
</button>

Tips

  • Forms should include enabled buttons by default and notifications should be used to alert users when trying to submit a form without filling out all required fields.