To visually group a set of buttons together to form a single block of buttons that look contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together.
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
By default, grouped buttons are presented as a vertical list:
By adding the data-type="horizontal" attribute to the control group container, you can swap this to a horizontal style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. Be aware that these will wrap to multiple lines if the button number of text length is to wide for the screen.
Horizontal grouped buttons
Horizontal grouped buttons with icons
Horizontal grouped buttons, icon only