Buttons
Buttons are components that exist inside of containers. They're designed to let the user submit information, make a decision, and/or navigate to another place.
The buttons have been labeled according to priority: use the "primary" buttons for main actions, and secondary buttons or links for smaller actions. In general, refrain from using .button--super-primary more than once per page or screen, and avoid using .button--secondary on gray backgrounds, as it's already a gray button.
Hierarchy
When displayed side-by-side, primary action buttons are generally positioned first, on the left.
%button.button.button--primary Primary
%button.button.button--secondary Secondary
<button class='button button--primary'>Primary</button>
<button class='button button--secondary'>Secondary</button>Sizes
%button.button.button--small.button--primary Small
%button.button.button--primary Default
<button class='button button--small button--primary'>Small</button>
<button class='button button--primary'>Default</button>Backup plan
If these buttons aren't working in your situation, refer to the old Button page in our Style Guide.
Contact
Primary designer was Alex Couch; primary developer was Carlos Leon.