A primary button allow users to take actions, and make choices, with a single tap.
Buttons are aligned to the right hand side of a page. In some cases where there are form fields that need an approximate action, the button can be placed at the right end of a row if there are 1-3 form fields before.
Describe the action that will occur if a user taps a button. For maximum legibility, don’t wrap text.
Buttons take the size of their container, spanning a minimum of 3 columns in the foundation grid.
A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. Emphasis is conveyed with styling:
Use a
<button type="button" name="button-exp-1" id="button-exp-1" class="button primary expanded">
Primary button expanded
</button>