Mozilla Foundation Design

Mozilla Foundation Design

UI Components

Buttons

Use this to trigger actions and links.

Button Labels

  • button labels use sentence case
  • keep labels short as possible and action based
mozilla foundation buttons labels

Buttons Styles & States

mozilla foundation buttons
mozilla foundation buttons dark theme

Disabled Button State

Set opacity of button to 30% for normal buttons and 50% for inverse buttons.

Disabled buttons stay the same on hover.

Disabled Button Style

In-line Icon Button

Icon should be 16px in height, width can vary. Icon should be spaced 8px from the label. Label and Icon should then be grouped and centered in button.

In-line Icon Button

Grouped Buttons

Grouped in-line icon buttons should be 16px apart from the left/right, and top/bottom. On desktop grouped buttons are laid out in a line, on mobile the group can switch to two rows. Grouped buttons are left aligned (not centered).

How wide the buttons are depends on the longest word in the grouped button set (with the other buttons following its width), aiming to have 16px of spacing between the word and the right and left side of the button (see the Facebook button as an example).

Grouped Button Style

Social Buttons

Social Buttons
Circular Social Buttons

Button Usage

  • Primary Buttons: limit one per page to highlight main call to action; not every page requires a primary button
  • Secondary Buttons: standard button for links to another page or information
  • Pop Buttons: special use cases only on home page

Button Arrangement

  • Alignment: all left-aligned (exceptions support navigation or UI)
    • Primary button is full-width on mobile
  • Order: by importance left to right