Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
Please note that the selection of button styles as provided by this style-guide is somewhat limited, as motivated by a desire for consistency over customizability.
You can create a button using minimal markup.
<!-- Default Button -->
<a href="#" class="button" id="button-primary">Default Button</a>
Note that you can display buttons with either <a> tags or <button>
tags, though with <button> tags, no classes are necessary to display the
default.
<!-- Using a button tag -->
<button>Default Button</button>
Additional classes can be added to your button to change its color.
Some of these classes denote a button's emphasis.
<!-- Emphasis Color Classes -->
<a href="#" class="button">Default Button</a>
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button tertiary">Tertiary Button</a>
<a href="#" class="button dull">Dull Button</a>
Other classes denote a button's context.
<!-- Contextual Color Classes -->
<a href="#" class="button success">Success Button</a>
<a href="#" class="button alert">Alert Button</a>
<a href="#" class="button warning">Warning Button</a>
<a href="#" class="button info">Info Button</a>
We have also provided for you a .ghost button to be used on dark backgrounds.
<div class="bg-dark-grey padding-medium">
<a href="#" class="button ghost">Ghost Button</a>
</div>
Additional classes can be added to your button to change its size.
<!-- Size Classes -->
<a href="#" class="button large">Large Button</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button small">Small Button</a>
<a href="#" class="button tiny">Tiny Button</a>
By default, buttons display as inline-block and only take up the room
needed by the text they contain. To establish a new block context and expand
the button to the size of its container, use the .expand class.
<!-- Block-level Modifier Classes -->
<a href="#" class="button expand">Expanded Button</a>
To render a button with a disabled state, simply add a .disabled class
or a [disabled] attribute.
<!-- Disable via Class -->
<a href="#" class="button disabled">Disabled Button</a>
<!-- Disable via Attribute -->
<a href="#" class="button" disabled>Disabled Button</a>
The disabled state applies to all color variants discussed above.
<!-- Disabled Emphasis Buttons -->
<div>
<a href="#" class="button" disabled>Default Button</a>
<a href="#" class="button secondary" disabled>Secondary Button</a>
<a href="#" class="button tertiary" disabled>Tertiary Button</a>
<a href="#" class="button dull" disabled>Dull Button</a>
</div>
<!-- Disabled Contextual Buttons -->
<div>
<a href="#" class="button success" disabled>Success Button</a>
<a href="#" class="button alert" disabled>Alert Button</a>
<a href="#" class="button warning" disabled>Warning Button</a>
<a href="#" class="button info" disabled>Info Button</a>
</div>
<!-- Disabled Ghost Buttons -->
<div class="bg-dark-grey padding-medium">
<a href="#" class="button ghost" disabled>Ghost Button</a>
</div>
The Select-Button is meant to replace Foundation's Split Button with a similar component that uses native functionality to achieve the same end.
<!-- Example select button -->
<select class="button">
<option value="Select Button">Select Button</option>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
</select>
The width of a Select Button is determined by the width of the longest
<option> it contains.
<!-- Short select button -->
<select class="button">
<option value="Short">Short</option>
</select>
<!-- Long select button -->
<select class="button">
<option value="Long">While, on the other hand, this button is quite long.</option>
<option value="Short">A useless, short option.</option>
</select>
You may expand the button with the .expand class, just as you would with
a button.
<!-- Expanded select button -->
<select class="button expand">
<option value="Expanded">Expanded Select Button</option>
</select>
You may add colors to a Select-Button just as you would a standard button.
<!-- Default select button -->
<select class="button">
<option value="Default">Select Button</option>
</select>
<!-- Success select button -->
<select class="button secondary">
<option value="Secondary">Secondary Button</option>
</select>
In addition, you may resize a Select-Button just as you would a standard button.
<!-- Tiny select button -->
<select class="button tiny">
<option value="Tiny">Tiny Select Button</option>
</select>
<!-- Small select button -->
<select class="button small">
<option value="Small">Small Success Button</option>
</select>
<!-- Default select button -->
<select class="button">
<option value="Default">Default Select Button</option>
</select>
<!-- Large select button -->
<select class="button large">
<option value="Large">Large Select Button</option>
</select>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.