Home Search

Grouped buttons

Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped 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>

By default, grouped buttons are presented as a vertical list:

Yes No Maybe

By adding the data-type="horizontal" attribute to the controlgroup container, you can swap 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 number of buttons or the overall text length is too wide for the screen.)

Horizontal grouped buttons:

Yes No Maybe

Mini horizontal grouped buttons by adding data-mini="true to the controlgroup:

Yes No Maybe

Horizontal grouped buttons with icons:

Add Delete

Mini horizontal grouped buttons with icons by adding data-mini="true to the controlgroup::

Add Delete

Horizontal grouped buttons, icon only:

Up Down Delete