Input button

Buttons can be implemented using either <button type="button">Button label</button> or <input type="button" value="Button label"/>. A major difference is that input buttons do not support having HTML markup in the label portion of the button. If that is needed to do something such as having an icon display on the button then the <button> variant would be better.

Usage Guidelines

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.

Text label

Describe the action that will occur if a user taps a button. For maximum legibility, don’t wrap text.

Size

Buttons take the size of their container, spanning a minimum of 3 columns in the foundation grid.

Hierarchy

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:

• High emphasis: Primary buttons
• Medium emphasis: Secondary buttons
• Low emphasis: Text links

Accessibility

Use a tag with the appropriate class and a clear text label. Additional hidden text can be added to the label if context requires so.