A secondary button allows users to take secondary/optional actions and choices.
Buttons are aligned to the right hand side of a page. In some cases where there are form fields that need an approximate action, a button can be placed at the right end of a row if there are 1-3 form fields before it.
Describes the action that will occur if a user clicks taps on a button. For maximum legibility, avoid text wrapping on 100% views and common screen sizes.
Buttons typically 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:
If all buttons on a dialog or tangent application page are optional, the secondary treatment can be used for all buttons. E.g. “Print” or “Email” buttons on a receipt details dialog.
Use a
<button type="button" name="button-icon-2" id="button-icon-2" class="button secondary">
Secondary button
<span class="icon-newpage" aria-hidden="true"></span>
<span class="show-for-sr">, opens another site in a new window that may not meet accessibility guidelines.</span>
</button>