Button Group

Ripple UI comes with a Button Group component that can be used to trigger actions.

​

Default

Simple example of ButtonGroup.

<div class="btn-group btn-group-scrollable">
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
</div>

​

Directions

ButtonGroup with different directions.

<div class="btn-group btn-group-vertical btn-group-scrollable">
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
</div>

​

Rounded

ButtonGroup Rounded.

<div class="btn-group btn-group-rounded btn-group-scrollable">
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn">Primary</button>
	<button class="btn btn-active">Primary</button>
</div>

​

As Radio

ButtonGroup handled with radio.

<div class="btn-group btn-group-scrollable">
	<input type="radio" name="options" data-content="1" class="btn" />
	<input type="radio" name="options" data-content="2" class="btn" />
	<input type="radio" name="options" data-content="3" class="btn" />
	<input type="radio" name="options" data-content="4" class="btn" />
</div>

​

API