User Manual

Button-group

Component used to list and group buttons together. Based on the used modifiers they can be aligned or moved in a horizontal or vertical direction.

Default


    
      

  

<div class="m-button-group ">
  <ul class="m-button-group__list">

    
      <li class="m-button-group__item">
        

<a
  class="a-button  "
  href=""
  
>
  <span class="a-button__text">Button 1</span>
</a>


      </li>
    
      <li class="m-button-group__item">
        

<a
  class="a-button  "
  href=""
  
>
  <span class="a-button__text">Button 2</span>
</a>


      </li>
    

  </ul>
</div>

Vertical


    
      

  

<div class="m-button-group m-button-group--vertical">
  <ul class="m-button-group__list">

    
      <li class="m-button-group__item">
        

<a
  class="a-button  "
  href=""
  
>
  <span class="a-button__text">Button 1</span>
</a>


      </li>
    
      <li class="m-button-group__item">
        

<a
  class="a-button  "
  href=""
  
>
  <span class="a-button__text">Button 2</span>
</a>


      </li>
    

  </ul>
</div>

Modifiers

  • m-button-group--vertical

    Vertically align all the buttons underneath each other and stretch them to the outer sides of the container