Buttongroup

In groundhog since v5.0.0

Examples


<div class="buttongroup">
  <a href="#" class="btn">Group item 1</a>
  <a href="#" class="btn">Group item 2</a>
  <a href="#" class="btn">Group item 3</a>
</div>

Group item 1 Group item 2 Group item 3


<div class="buttongroup">
  <a href="#" class="btn">Group item 1</a>
  <a href="#" class="btn is-active">Group item 2</a>
  <a href="#" class="btn">Group item 3</a>
</div>

Group item 1 Group item 2 Group item 3


<div class="theme--blue">
  <div class="buttongroup">
    <a href="#" class="btn">Group item 1</a>
    <a href="#" class="btn is-active">Group item 2</a>
    <a href="#" class="btn">Group item 3</a>
  </div>
</div>

Group item 1 Group item 2 Group item 3


<div class="theme--purple">
  <div class="buttongroup">
    <a href="#" class="btn">Group item 1</a>
    <a href="#" class="btn is-active">Group item 2</a>
    <a href="#" class="btn">Group item 3</a>
  </div>
</div>

Group item 1 Group item 2 Group item 3


<div class="theme--royalblue">
  <div class="buttongroup">
    <a href="#" class="btn">Group item 1</a>
    <a href="#" class="btn is-active">Group item 2</a>
    <a href="#" class="btn">Group item 3</a>
  </div>
</div>

Group item 1 Group item 2 Group item 3


<div class="theme--green">
  <div class="buttongroup">
    <a href="#" class="btn">Group item 1</a>
    <a href="#" class="btn is-active">Group item 2</a>
    <a href="#" class="btn">Group item 3</a>
  </div>
</div>

Introduction

The Groundhog buttongroup joins buttons, which are contextually connected. Most of the time they can function like tabs, where only one can be active.

Create a buttongroup

To create a buttongroup, create a wrapping element around the buttons you want to wrap. Give the wrapping element the attribute class="buttongroup" to enable the buttongroup styling.

Buttons within a buttongroup can be marked as active by adding the class is-active to the link / button element.

Available themes for buttongroup

The default theme for the buttongroup is turquoise, other available themes are:

class name	theme color
`.theme--blue`	Base class blue theme
`.theme--green`	Base class green theme
`.theme--purple`	Base class purple theme
`.theme--royalblue`	Base class royalblue theme
`.theme--turquoise`	Base class turquoise theme