<commit_before>---
layout: doc/layouts/default.html
---

# Button Groups

<h3 class="subheader">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.</h3>

{{> examples_button_group_basic}}

***

<h3>Basic</h3>

Using minimal markup you can create a button group

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{> examples_button_group_basic_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
{{> examples_button_group_basic}}
  </div>
</div>

<h3>Advanced</h3>

Additional classes can be added to your button groups to change its appearance

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```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>
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="button-group radius">
      <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>
  </div>
</div>

***

## Button Bars

<h3 class="subheader">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.</h3>

{{> examples_button_group_bar}}

***

<h3>Basic</h3>

Using minimal markup you can create a button bar.

<h4>HTML</h4>

{{> examples_button_group_bar}}

<h4>Rendered HTML</h4>

{{> examples_button_group_bar_rendered}}

<h3>Advanced</h3>

Additional classes can be added to your button bar to change it's appearance.


<h4>HTML</h4>

{{> examples_button_group_bar_advanced}}

<h4>Rendered HTML</h4>

{{> examples_button_group_bar_advanced_rendered}}

***

## Customize with Sass

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

<h4>SCSS</h4>

{{> examples_button_group_variables}}

***

## Semantic Markup with Sass

<h3>Basic</h3>

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:

<div class="row">
  <div class="large-6 columns">
    <h4>SCSS</h4>
{{#markdown}}
```scss
.custom-button-group-class {
  @include button-group-container();
  .custom-button-class {
    @include button();
  }
  & > li { @include button-group-style(); }
}
```
{{/markdown}}

  <p>You can find more information regarding button mixins <a href="{{relative absolute 'dist/docs/components/buttons.html'}}">here</a></p>
  </div>
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_button_group_basic_mixin}}
  </div>
</div>

<h3>Advanced</h3>

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

<h4>SCSS</h4>

{{> examples_button_group_container_mixin}}

##### Button Group Style Options

{{> examples_button_group_style_mixin}}<commit_msg>Add button groups copy edits<commit_after>---
layout: doc/layouts/default.html
---

# Button Groups

<h3 class="subheader">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.</h3>

{{> examples_button_group_basic}}

***

<h3>Basic</h3>

You can create a button group using minimal markup.

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{> examples_button_group_basic_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
{{> examples_button_group_basic}}
  </div>
</div>

<h3>Advanced</h3>

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

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```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>
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="button-group radius">
      <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>
  </div>
</div>

***

## Button Bars

<h3 class="subheader">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.</h3>

{{> examples_button_group_bar}}

***

<h3>Basic</h3>

You can create a button bar using minimal markup.

<h4>HTML</h4>

{{> examples_button_group_bar}}

<h4>Rendered HTML</h4>

{{> examples_button_group_bar_rendered}}

<h3>Advanced</h3>

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


<h4>HTML</h4>

{{> examples_button_group_bar_advanced}}

<h4>Rendered HTML</h4>

{{> examples_button_group_bar_advanced_rendered}}

***

## Customize With Sass

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

<h4>SCSS</h4>

{{> examples_button_group_variables}}

***

## Semantic Markup With Sass

<h3>Basic</h3>

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:

<div class="row">
  <div class="large-6 columns">
    <h4>SCSS</h4>
{{#markdown}}
```scss
.custom-button-group-class {
  @include button-group-container();
  .custom-button-class {
    @include button();
  }
  & > li { @include button-group-style(); }
}
```
{{/markdown}}

<p>You can find more information regarding button mixins <a href="{{relative absolute 'dist/docs/components/buttons.html'}}">here</a>.</p>
  </div>
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_button_group_basic_mixin}}
  </div>
</div>

<h3>Advanced</h3>

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

<h4>SCSS</h4>

{{> examples_button_group_container_mixin}}

##### Button Group Style Options

{{> examples_button_group_style_mixin}}
{'fraction_non_alphanumeric': 0.16321998612074948, 'fraction_numerical': 0.014989590562109646, 'mean_word_length': 4.63849765258216, 'pattern_counts': {'":': 0, '<': 199, '<?xml version=': 0, '>': 225, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6705363', 'n_tokens_mistral': 2474, 'n_tokens_neox': 2389, 'n_words': 705}