Button Groups

Button groups are containers for related action items. They're 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.

---

• Button 1
• Button 2
• Button 3

---

Basic

You can create a button group using minimal markup.

HTML

<!-- A default button-group with small buttons inside -->
<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>

Rendered HTML

• Button 1
• Button 2
• Button 3

---

Advanced

Additional classes can be added to your button group to change its appearance.

HTML

<ul class="button-group [radius round]">
  <li><a href="#" class="button [secondary alert success]">Button 1</a></li>
  <li><a href="#" class="button [secondary alert success]">Button 2</a></li>
  <li><a href="#" class="button [secondary alert success]">Button 3</a></li>
  <li><a href="#" class="button [secondary alert success]">Button 4</a></li>
</ul>

Rendered HTML

• Button 1
• Button 2
• Button 3
• Button 4

---

Button Bars

A button bar is a group of button groups, 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.

Basic

You can create a button bar using minimal markup.

HTML

<div class="button-bar">
  <ul class="button-group">
    <li><a href="#" class="small button">Button 1</a></li>
    <li><a href="#" class="small button">Button 2</a></li>
    <li><a href="#" class="small button">Button 3</a></li>
  </ul>
  <ul class="button-group">
    <li><a href="#" class="small button">Button 1</a></li>
    <li><a href="#" class="small button">Button 2</a></li>
    <li><a href="#" class="small button">Button 3</a></li>
  </ul>
</div>

Rendered HTML

Advanced

Additional classes can be added to your button bar to change its appearance.

HTML

<div class="button-bar">
  <ul class="button-group [radius round]">
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 1</a></li>
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 2</a></li>
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 3</a></li>
  </ul>
  <ul class="button-group [radius round]">
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 1</a></li>
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 2</a></li>
    <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 3</a></li>
  </ul>
</div>

Rendered HTML

---

Customize With Sass

Button bars can be easily customized using our provided Sass variables.

SCSS

$include-html-button-classes: $include-html-classes;

// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
$button-bar-margin-opposite: rem-calc(10);

---

Semantic Markup With Sass

You can use our mixins to use button groups on your own markup.

Basic

You can use the button-group-container() and button-group-style() mixins to create your own button groups and button bars with semantic markup, like so:

SCSS

.custom-button-group-class {
  @include button-group-container();
  .custom-button-class {
    @include button();
  }
  & > li { @include button-group-style(); }
}

You can find more information regarding button mixins here.

HTML

<ul class="custom-button-group-class">
  <li><a href="#" class="custom-button-class">Button 1</a></li>
  <li><a href="#" class="custom-button-class">Button 2</a></li>
  <li><a href="#" class="custom-button-class">Button 3</a></li>
</ul>

Advanced

You can further customize your button groups using using the provided options in the button-group-container() and button-group-style() mixin:

Button Group Container Options

SCSS

.custom-button-container-class {
  @include button-group-container(
    // we use this to add styles for a button group container. Default: true
    $styles:true,
    // We use this if we want the button group container floated. It relies on the $default-float scss variable. Default: false;
    $float:false
  );
  .custom-button-class { @include button; }
}

Button Group Style Options

SCSS

.your-class-name { @include button-group-container();
  .your-button-class { @include button(); }

  & > li {
    @include button-group-style(
      // This controls the radius of the left and right edges. Set to true or px value. Default: false
      $radius:true,
      // This makes the buttons take up even space in their container. Set to the number of buttons in the group. Default: false.
      $even:false,
      // Controls how the buttons in the group float set to left or right. Default: $default-float.
      $float:right
    );
  }
}

---

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/grid";