Button Groups

Buttons Groups help handle layout of logical groupings of buttons, such as a submit button next to a cancel button. By default, a Button Group's buttons will be block level, establishing a 'stacked' arrangement of buttons.

There is no helper method to facilitate Button Groups. A Button Group is established with a wrapper element with the "btn_group" class; the children that are to be the buttons in the button group need the "btn_group__button" class applied on each button.

Basic Button Group

The example below shows how to create a button group in combination with Razor button helpers.

<div class="btn_group">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

Inline Button Group

To make buttons in the group inline instead of block level, add the modifier class "btn_group--inline".

<div class="btn_group btn_group--inline">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

Responsive Inline Button Group

To let buttons be stacked in smaller devices and inline at larger breakpoints, leverage a modifier class such as "btn_group--sm_inline" (which reverts the buttons to inline at the "sm" breakpoint.

<div class="btn_group btn_group--sm_inline">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

Full Width Buttons

To achieve buttons which expand to the width of their parent "btn_group", add the modifier class "btn_group--full_width".

<div class="btn_group btn_group--full_width">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

As with stacked vs inline buttons, there are responsive modifiers to let a full width button revert to "width: auto" at standard breakpoints.

<div class="btn_group btn_group--full_width btn_group--med_auto_width">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

Centered Buttons

Centering the buttons in a button group is achieved with the "btn_group--centered" modifier. Note that because the default for button groups is to create stacked buttons, if your intention is side-by-side centered buttons, you'll need to add "btn_group--inline" as well.

<div class="btn_group btn_group--inline btn_group--centered">
    @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
</div>

If your goal is to create buttons that are stacked as well as centered, you'll need a bit of custom markup. First, we need the "btn_group--centered" modifier class. Then we need a wrapper around each button; the appropriate class is "btn_group__button_wrapper".

<div class="btn_group btn_group--centered">
    <div class="btn_group__button_wrapper">
        @ButtonHelpers.Button("Button 1", @class: "btn_group__button")
    </div>
    <div class="btn_group__button_wrapper">
        @ButtonHelpers.Button("Button 2", @class: "btn_group__button")
    </div>
</div>