Firefox OS App Buttons

Basics

Button styles vary based on the type of action they trigger. The correct style should be used for each button to ensure consistent interaction and coherent visuals. Some buttons – such as disabled idle buttons – are background sensitive. Make sure to correctly apply styling for buttons on dark backgrounds.

Action Buttons

Idle, Call to Action, and Delete buttons have the exact same visual style on light and dark backgrounds. However, the receding effect on disabled state buttons varies between light and dark backgrounds.

Text is centered on action buttons.

List Buttons

List buttons for triggering actions are designed for light backgrounds, while value selector buttons are designed to appear on a dark overlay. This is the reason for differing visual treatments on disabled states.

The list buttons may have flexible size to fit the other elements in the list.

Elements of a List Button:

  1. In all List buttons text is left aligned.
  2. 1.5 rem gap from the button’s left edge.
  3. 3 rem square safe area for the icon
  4. The arrow indicates an overlay with a value selector will be displayed

Special Buttons

Usage Examples

Main buttons
Value selectors + single main button
Display value selectors
List buttons
Special buttons
Special buttons

Do

One (longer) button
Two (shorter buttons)

Action buttons are placed at the bottom of the screen and may have 2 different sizes, a longer button when 1 button is needed, and a shorter length when 2 buttons are needed.

When the button(s) affects the content of the whole screen, it is placed at the botton, divided from the rest of the content pane by a horizontal line and a 5% darker rectangle.

Don't

Incorrect use of a shorter action button
Incorrect use of a list button.
Do not center text in list buttons

Download

You can download the Firefox OS Stencil PSD here.