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 to fit your needs.

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).

• Sizes

  Tiny
  
  Small
  
  Medium
  
  Large

  Type

  Normal
  
  Secondary
  
  Success
  
  Alert

  Styles

  Square
  
  Radius
  
  Round
  
  

  Button classes can also be applied to button elements, as well as input type="submit" elements.

  Form Button Regular Button »

• 
  <!-- Sizes -->
  <a class="tiny button" href="#">Tiny</a>
  <a class="small button" href="#">Small</a>
  <a class="button" href="#">Medium</a>
  <a class="large button" href="#">Large</a>
  <!-- Types -->
  <a class="button" href="#">Normal</a>
  <a class="secondary button" href="#">Secondary</a>
  <a class="success button" href="#">Success</a>
  <a class="alert button" href="#">Alert</a>
  <!-- Styles -->
  <a class="button" href="#">Square</a>
  <a class="radius button" href="#">Radius</a>
  <a class="round button" href="#">Round</a>
  <!-- Inputs and Submits -->
  <button class="button">Form Button</button>
  <input type="submit" class="button" value="Input Submit Button" />
  

---

When you need a group of actions, button groups give you some easy-to-use options.

• Button Group - Radius

  A button group is simply a ul.button-group in which each li contains a button. You can attach a button style, such as radius or rounded, to the entire group, and Foundation will apply the style to the first and last buttons in the group.

  • Button 1
  • Button 2
  • Button 3

  Even Button Groups

  If you want a button group to fill a grid column with evenly sized actions, you can simply add two classes to the group: .even and either .two-up, .three-up, .four-up, or .five-up.

  • Button 1
  • Button 2
  • Button 3

  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 div.button-bar and Foundation takes care of the rest.

  • Button 1
  • Button 2
  • Button 3

  • Button 1
  • Button 2
  • Button 3

  Buttons within groups or bars can also be individually set to a particular type (color) or size. Obviously if you create a button bar with different sized buttons the visual presentation may suffer a bit, but we wanted these to be very flexible.

• 
  <!-- Basic Button Groups -->
  <ul class="button-group radius">
    <li><a href="#" class="button radius">Button 1</a></li>
    <li><a href="#" class="button radius">Button 2</a></li>
    <li><a href="#" class="button radius">Button 3</a></li>
  </ul>
  <!-- Even Button Groups -->
  <ul class="button-group even three-up">
    <li><a href="#" class="button">Button 1</a></li>
    <li><a href="#" class="button">Button 2</a></li>
    <li><a href="#" class="button">Button 3</a></li>
  </ul>
  <!-- Button Bar -->
  <div class="button-bar">
    <ul class="button-group">
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
    </ul>
    <ul class="button-group">
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
    </ul>
  </div>
  

---

Foundation 3 includes two types of dropdown buttons: buttons which create a dropdown when you click them and buttons which have a dropdown when you click specifically on the down-arrow part of the button (a split button).

• 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. Dropdown buttons use the same classes as any other button, but a different structure. If you need your dropdown to go up, simple add a class of .up to .button.dropdown.

  Dropdown Button

  • Dropdown Item
  • Another Dropdown Item
  • Last Item

• 
  <div href="#" class="large button dropdown">
    Dropdown Button
    <ul>
      <li><a href="#">Dropdown Item</a></li>
      <li><a href="#">Another Dropdown Item</a></li>
      <li class="divider"></li>
      <li><a href="#">Last Item</a></li>
    </ul>
  </div>
  

---

Split buttons in turn use similar classes, and a different structure than regular or dropdown buttons. They require an affordance for the clickable area that engages the dropdown and for the normal button action. We use a <span> for this affordance.

• Split Button

  • Dropdown Item
  • Another Dropdown Item
  • Last Item

• 
  <div href="#" class="large alert button split dropdown">
    <a href="#">Split Button</a>
      <span></span>
    <ul>
      <li><a href="#">Dropdown Item</a></li>
      <li><a href="#">Another Dropdown Item</a></li>
      <li class="divider"></li>
      <li><a href="#">Last Item</a></li>
    </ul>
  </div>
  <!--
    Notice that in a split button, the <span> is the dropdown
    affordance and the main anchor is the primary button action.
  -->
  

---