Disabled Button State
Set opacity of button to 30% for normal buttons and 50% for inverse buttons.
Disabled buttons stay the same on hover.
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.
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).
- 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
- Alignment: all left-aligned (exceptions support navigation or UI)
- Primary button is full-width on mobile
- Order: by importance left to right