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.
Use anchor links (
a elements) to mark up navigation buttons, and
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:
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.
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.
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.
An icon can be added to a button by adding a
data-icon attribute on the anchor specifying the icon to display.
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.
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.
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:
There are options for controlling the rounded corners (
data-corners), drop shadow (
data-shadow), and icon shadow for the highlight under the icon disc (
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