<% @page_title = "Button Groups" %>

<%= @page_title %>

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.

Build With Predefined HTML Classes

There are two ways to build button groups in Foundation 4: with our predefined HTML classes or with our structure and mixins. 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.

<%= code_example '

', :html %>

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.

<%= code_example '

', :html %>

For any of these styles to take effect, make sure you have the default Foundation CSS package or that you've selected buttons and button-groups from a custom package. These should be linked up following our default HTML page structure.

Build with Mixins

We've included SCSS mixins used to style button groups. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _global.scss, _buttons.scss and _button-groups.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/buttons", "foundation/components/button-groups"; ', :css %>

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<%= code_example '

', :html %>

Container Mixin

Since button groups need to be within a list to work properly, you'll need to create some styles for the list container that you use.

<%= code_example ' .your-class-name { @include button-group-container; } ', :css %>

You'll also need to make sure to include some styles for your buttons inside the group. Either use a class you've already styled, or apply it specifically here.

<%= code_example ' .your-class-name { @include button-group-container; .your-button-class { @include button; } } ', :css %>

Style Mixin

With this mixin, you'll be able to make the rest of the button-group, including: radius, even with styles and floats. You'll apply this mixin to the <li> elements of the button group list.

<%= code_example ' .your-class-name { @include button-group-container; .your-button-class { @include button; } & > li { @include button-group-style($radius, $even, $float); } } /* This controls the radius of the left and right edges. */ /* Set to true or px value */ $radius: false /* This makes the buttons take up even space in their container */ /* Set to the number of buttons in the group */ $even: false /* Controls how the buttons in the group floatm set to left or right */ $float: left ', :css %>

Inset Shadow, Border Radius & Transition Mixin

Sometimes you want to add a nice fancy shine to the edge of your buttons. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the buttons a fade effect.

<%= code_example ' .your-class-name { @include button-group-container; .your-button-class { @include button; @include inset-shadow; @include single-transition; } & > li { @include button-group-style(true); } } ', :css %>

Building Button Bars

You can also build button bars with mixin options.

<%= code_example '

', :html %> <%= code_example ' .your-bar-class-name { @include clearfix; .your-button-class { @include button-group-container(false,true); } } ', :css %>

Default SCSS Variables

<%= code_example ' $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: emCalc(10); ', :css %>

Note: emCalc(); is a function we wrote to convert px to em.

<%= render "_sidebar-components.html.erb" %>