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

Building buttons using our predefined classes is simple, you’ll need an < a> , < button> or < input> with a class of .button. This will create a default medium button. You can also use size, color and radius classes to control more of the style.

The class options:

The size classes include: .tiny, .small, .medium or .large

The color classes include: .secondary, .alert or .success

The radius classes include: .radius or .round

You can also add .disabled to any button and it will look and act disabled.

To have a button go full width use .expand class.

Expanded Button

Large Button Expanded

Button Groups

Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.

Building button groups using our predefined classes is a breeze, you’ll just wrap a button inside an < ul>.

The button styles will work the same as they do when building a single button, but they’ll float next to each other to create a group.

You also have access to the same radius classes as buttons, only they’ll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.

The radius classes: .radius or .round.

The even classes: .even-2 through .even-8 to control the even widths.

Button Bars

A button bar is a group of button groups (I N C E P T I O N), perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a .button-bar and Foundation takes care of the rest.

Split Buttons

We’ve simplified our split buttons by getting rid of the dedicated dropdown associated with them. Instead, you’ll use our new dropdown plugin to attach a dropdown to the button style of your choice.

Icon Buttons

With the help of Font Awesome you can build buttons using icons and button classes. You can see the list of icons that you can use here


Secondary Button

Success Button

Alert Button