Button group

This is a group of buttons which can be aranged differently by using modifiers.

Default

px 

			
				<div class="m-button-group ">
	<button class="a-button  ">
		<span class="a-button__text">Button 1</span>
	</button>
	<button class="a-button  ">
		<span class="a-button__text">Button 2</span>
	</button>
	<button class="a-button  ">
		<span class="a-button__text">Button 3</span>
	</button>
</div>

Documentation

Modifiers

  • m-button-group--space-between

    Puts space between the buttons

  • m-button-group--end

    Will place the buttons at the end

  • m-button-group--center

    Will place the buttons centered

  • m-button-group--left

    Will place the buttons at the left side

  • m-button-group--col

    Will place the buttons in a column instead of a row