Buttons API

Buttons are core widgets in jQuery Mobile and are used within a wide range of other plugins. The button markup is flexible and can be created from links or form buttons.

Basic markup

Use anchor links (a elements) to mark up navigation buttons, and input or button elements for form submission. By default, all buttons in the body content are styled as block-level elements so they fill the width of the screen:

Inline

If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content so the buttons sit on the same line.

Theme

Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with their container by adding the data-theme attribute on the button markup and specifying a swatch letter. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon.

Mini

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the button to create a mini version.

Icons

An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display.

Icon position

By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. You can also create an icon-only button, by setting the data-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips.

Vertical group

To visually group a set of buttons to form a single block, 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.

Horizontal group

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.

Mini horizontal grouped buttons, icon-only:

Corners & shadows

There are options for controlling the rounded corners (data-corners), drop shadow (data-shadow), and icon shadow for the highlight under the icon disc (data-iconshadow).

Disabled

Form input or buttons can be disabled via the disabled attribute. Links styled like buttons have all the same visual options as true form-based buttons, but aren't part of the button plugin so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.