Button Group#

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

Default#

Simple example of ButtonGroup.

HTML

JSX

<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.

HTML

JSX

<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.

HTML

JSX

<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.

HTML

JSX

<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#

`Button Group Classes`

class	Description
btn-group	Button Group base class
btn-active	Active state
btn-group-vertical	Vertical orientation
btn-group-vertical	Horizontal orientation
btn-group-scrollable	Prevent buttons break when go to small sizes and add scroll
btn-group-rounded	First and last child fully rounded

Button Card

Edit this page on GitHub