« Back

Foundation Button Testing


Buttons

Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.


Basic Buttons

Foundation buttons have a number of parameters and styles — you can see a few examples below. The out of the box classes include size, type (color) and style (square, slightly rounded, and completely rounded).





Button Groups

When you need a group of actions, button groups give you some easy-to-use options. These can have a class of .rounded or .even. You can even create button bars by using .button-bar.




Dropdown Buttons

These are useful when an action has several possible outcomes to select from, or when there are secondary choices you can make in lieu of a primary action.

If you need your dropdown to go up, simple add a class of .up to .button.dropdown.

Notice that in a split button, the span is the dropdown affordance and the main anchor is the primary button action.